3 column css problem

[transmutated]

The css...

#content {
margin-left: auto;
margin-right: auto;
color: #999;
font-size: 14px;
text-indent: 25px;
width: 250px;
float: left;
padding-right: 4px;
padding-left: 4px;
}

#maincontainer {
width: 100%;
margin-top: 100px;
}

Usage in the html:

<div id="maincontainer">
<div id="content"></div>
<div id="content"></div>
<div id="content"></div>
</div>

Problemo:

Alright. I know it is a simple deal, but what I working on my first fluid design sight and these three columns seem to be giving me hell.

I originally had their width set to a % and this was pretty good, but it didn't eat up all 100% of the screen. So, I set it to a constant width as you can see. I have to float left to keep them all in the same row, but they all align to the left, even with the margins set to auto. So, I am lost. Any help would be FANTASTIC! Thanks!

[londrum]

hello. there's probably loads of ways of doing it, but the way i would do it would be like this...

first of all, you need to change your id="content". you are only allowed to have one instance of an id on each page. and at the moment you have got three identical ones. that will stop the page validating, and it will probably cause you bigger problems somewhere down the line if you start adding ajax or something to it.

try calling the columns something like id="one, id="two" and id="three"

then you need to position:absolute each column to the top-lefthand corner of the page, like this

#one, #two, #three { position:absolute; top:0; left:0; width:100%; }

notice that i have made each column width:100%.

then you need to apply some padding to each column, to make them the correct widths. so...

#one { padding-right:66%; }
#two { padding-left:33%; padding-right:33%; }
#three { padding-left:66%; }

you'll probably have to fiddle with the paddings a bit, to stop the horizontal scrollbar from appearing (stuff like the IE 3px bug might mess it up)

[Xapti]

londrum, I did not test your example, but that seems like some strange IE-only thing you did there.

IE is the only browser which considers padding part of the element's dimentions. In most other browsers, 100% width plus 66% padding = 166% page width.

Now I don't know exactly what you want, transmuted... you either want the three columns to each take up 1/3 of the page, OR, have a fixed with, but be CENTERED on the page? Which do you prefer? both should be doable

Firstly, one thing you might want to think about, is using EMs instead of pixels for anything which might contain text. EMs resize based on the user's font size.

Now, the reason you can't use percentage widths for the three columns RIGHT NOW is because of the padding. 100% width would give a total width of 100% + (4+4)*3 pixels, since like I already mentioned, an element's width does not include it's padding.

The solution would be to either completely throw away your padding, or if you need it, have the width:33.33% div have a nested div inside of it, which then contains the padding.

For a fixed width, centered page, just move the margin-left:auto;margin-right:auto to #maincontainer. This should make the container centered on the page, and the columns will be floated relative to, and inside of it.

And londrum was right about the IDs. While you could give unique one, two, three ids to the divs, you could also just assign them all the same CLASS.

One thing to realize... divs have a default width of 100% (unless positioned or floated). This is the case for all block-level elements. Setting width:100% will be a problem if ever it's side padding, margin, or border is not equal to zero. When it is zero, there's no help for it unless it's positioned or floated, because by default then it goes to an undefined (if not specified) width, often as small as it needs to be to fit all content, but doesn't actually need to fit any of it at all!

[londrum]

i think you've got it back to front -- most browers consider padding to PART of the width.
so if your width is 100%, and you add 33% padding, then the width will still remain at 100%. but the content inside it will only fill 66%.

but there is one exception, like you say -- IE6 and below. that will add the padding to the width, so it will become 133%.
but you can get around that pretty easy by applying the padding to all elements inside the div, rather than to the actual div itself.

so if you make
div#one { width: 100%; }

then you could do something like this
#one h1, #one h2, #one p{ padding-left: 33%; }

...there must be an easier way though

[Xapti]

Uhh... you certain about that? test it for yourself :o

It's the reason why I don't like the box model much - I wish padding was part of an element's dimensions (or at least have something else which adds spacing inside an element).

[edited by: Xapti at 7:22 am (utc) on May 18, 2007]