Forum Moderators: not2easy
I need to find a way to apply a minimum amount of padding to a block. The behavour that I want is the following:
I want a DIV that spans the width of the page whos contents are centered. On the left hand side of the page I want to place another absolutely positioned DIV. The contents of the full width DIV should never overlap the side DIV. When the page is wide, the contents are centered. When the page is narrow, the contents will be pushed to the right to avoid overlapping the DIV.
I have managed to get most of this effect working here:
<snip>
The image is centered in the page, but never overlaps the menu and text on the left. This is done very simply by giving the main DIV left and right margins equal to the width of the left hand DIV. In firefox, this works perfectly.
In IE, there is a side effect. The right hand margin, needed to center the contents, causes the horizontal scroll bar to appear ealier than necessary, allowing the user to scroll into empty space. This doesn't happen in Firefox.
Can anyone suggest any other solutions to the problem?
Thanks,
Tim
[edited by: engine at 10:25 am (utc) on July 4, 2006]
[edit reason] No urls, see TOS [webmasterworld.com] [/edit]
how about not using a right margin and instead make the main div say 65% wide or whatever makes it SEEM centered after the left margin has been given?
sample code ~ but I could have picked your meaning up wrongly ;)
<style type="text/css" media="screen">
#left {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 400px;
background: #ffc;
border: 1px solid #000;
}#main {
margin: 0 0 0 160px;
background: #eee;
width: 65%
}</style>
</head>
<body>
<div id="main">the main div with centered content</div>
<div id="left">left content</div>
Suzy
