centering a floated item

[Edwin]

Hi everybody,

My situation is this: I got a pagewrap with in it three div’s. A left div, a main div and a right div. The left one is about 200px widt and must be on the left :geek: the right one must be on the right :geek: and as you expected the main div must become in the middle of them. My question is: how can you center that main div? Because it will float left automatically. Here is a sample code to show what I want.

P.S. To be one step before some critics: I don’t use inline style-elements normally, but just for now to test and post this example I used them ;)

Code:

left

this must be centered between those other div’s

right

[Nodster]

Hi,

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

Code:

left

this must be centered between those other div’s

right

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.

[Nodster]

This is the image i get on XP, FF

don’t know why it doesn’t work, should do.

Could you have floated the ‘enclose div’ to the right instead of the left?

[koewnet]

Considering you’d only know the width of the sidebars, you could float the divs (left and right) above the main content-div. This, of course, wouldn’t be good for SEO nor accessibilty as you’d have to heap through the sidebars before the content.

Right after the body-start:

Code:

This is above the #page-wrap

This is below the #page-wrap

…then the CSS:

Code:

body { margin: 0; padding: 0; }
#page-wrap { width: auto; border-top: 1px black solid; border-bottom: 1px black solid; }
#left { width: 200px; float: left; background-color: #0f0; }
#right { width: 200px; float: right; background-color: #c0c; }
#main { width: auto; padding: 0 5px; margin: 0 205px; background-color: #0fe; }
.clearboth { clear: both; height: 1px; }
p { font-weight: bold; }

In this example you only give the #main margins, and the sidebars gets fixed widths. If you’d use this I’d recommend using overflow: hidden; on the sidebars, to not interrupt with the main content area.

[Nodster]

Ok then,

As i understand it, you are creating this 3 column display.
the left and right column are fixed and the maincontent div is variable.

If that is correct then why not simply use the max / min-width selectors in the maincontent div.

eg

Code:

div #maincontent {
min-width:10%;
max-width:80% /*assuming left column is 20%*/
}

This should also work if you want to set the widths to either em, px etc.

see here for further explanation: http://reference.sitepoint.com/css/max-width

[Argeaux]

I am not sure if this is exactly what you are looking for, but your story sounds alot like the "holy grail" to me.

So you may find this interesting, and maybe it helps:
http://www.alistapart.com/articles/holygrail

[thelemondropkid]

The reason why your centre column is not centering is due to the fact that there are 2 major errors in your code that you need to fix first.

1. You have a div with ID of ‘page-wrap’ that contains floated elements.
You have given all your ‘columns’ a fixed width but not the containing div. One of the CSS rules states that when a element contains floated, in needs to have a fixed width (or em based). What is happening is your right ‘column’ is floated right but has no boundaries as to what point it will float. The wider your browser is made the further that ‘column’ floats.
So therefore, add a 800px width to div ‘page-wrap’ and give it the boundary it needs. (200px + 400px + 200px = 800px)
That will now but all three ‘column’ right against each other. That takes care of one problem.

2. The next problem in your code is pertaining to the above mentioned containing ‘page-wrap’ div.
As it contains floated elements, you not only need to give it a fixed with like we have done, but, you also need to take care of it´s position in the ‘flow’ of the document. Your three ‘columns’ are floated and are taken out of the ‘flow’ of the document. The problem is this: ‘page-wrap’ has no float but contains floated elements and therefore does not ‘wrap’ the floated elements it contains. In order to do this, add ‘position: relative’ to page-wrap’ or float it too. One or the other would do but I would use the first mentioned property. The reason why i would use ‘position: relative’ is that if you wanted to place a ‘footer’ div below that needs to ‘clear’ all your ‘columns’, it would clear the containing ‘page-wrap’ div too, witch is not what you want.

Hope that helped you and did not put you to sleep.

Q.

[Author]

Posts