Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS centering a floated item Re: centering a floated item

#47365
Nodster
Member

Hi,

how about this for an answer, got it from ‘CSS Cookbook’

Code:

left
this must be centered between those other div’s

CSS to get the effect is:

Code:
#page-wrap {
width:900px;
background:#000;
}
#enclose {
width:700px; /*total width of left and maincontent divs*/
background:#000099;
float: left; /*floats it to the left of the page – leaving room for the right column */
}

#left {
width:200px;
background:#000099;
float: left;
}

#maincontent {
width:500px;
background:#009900;
float: right; /*floated to the right of the left column (but will still position to the left of the rightmost column /*
}

#right {
width:200px;
background:#990000;
float: right;
}

So basically this method works by enclosing the left and maincontent divs in an additional div which is then floated to the left.

hope that helps.