Please help, 3 column, CENTERED layout?

I don't quite know, argh.....

[Br3nn4n]

Hey everyone. I'm working on a redesign for a website I run. I need to get a layout with 3 columns, but I can't get everything to work correctly.

Say, I put 3 divs. 1 for each column. Then, the first one just leave where it is. The second, relatively position to be to the right of the 1st.....and that's where the problems begin.

I've tried float:right; on the second column (I understand how floats work) but that placed it BELOW and to the right of the 1st column. What?! Lol

And the third column, well that's a problem too. Haha....

I know I could absolutely position the whole thing, but I want the entire layout to only be about 700 pixels wide and centered, which I've done through a container div and gotten to work. It's positioning the three columns inside THAT container that's posing the problem, because I can't absolutely position them for obvious reasons (ie, elements will be outside the container on widescreen monitors.)

I'm sorry if that doesn't make much sense, I really do appreciate any and all help that you can offer though. This is driving me crazy haha.

Also, I have a working version online but I won't post the link here.

[yanwo]

you should make the first column float:left ,the second column float:left ,and the third column float:left,so the three columns can be displayed inline.

[Marshall]

CSS -

#wrapper {
width: 700px;
margin: 0 auto; /* centers content */
padding: 0;
}
#left {
width: 190px;
margin: 0;
padding: 0; /* I zero the padding and create spacing with margin settings */
float: left;
}
#center {
width: 500px;
margin: 0 10px;
padding: 0;
float: left;
}
#right {
width: 190px;
margin: 0;
padding: 0;
float: left;
}

HTML -

<div id="wrapper">
<div id="left">CONTENT</div>
<div id="center">CONTENT</div>
<div id="right">CONTENT</div>
</div>

Remember, the width of a <div> includes the width itself, the margins, and the padding.

Marshall

[Br3nn4n]

Thank you very much, I'll try that!

[mapleleaf]

Marshall

Is it possible that you may have an error?

you have the wrapper width as 700px while both the left and right are 190px and since both are within the wrapper then is ther not an issue.

should not both the left and right width be 100px thus the width of the wrapper is met?

I think otherwise both the left and right will have an incorrect with

mapleleaf

[Marshall]

My bad. The center equals 520px with margins. I was thinking of an 800px wide page when I wrote the code. Using a 520px center with a 700px wide page, the left and right columns should not exceed 180px total.

Sorry 'bout that.

Marshall

[Br3nn4n]

No problem at all! I made it 800px since I liked it a bit wider and it's perfect!

One last thing, I'd like to have a footer as well. Any way to do that and keep things from overlapping?

[mapleleaf]

have a peek at this which may/will help you.

have a look at the right column

[glish.com...]

mapleleaf

[Br3nn4n]

Alright, so what Marshall went by is this: [glish.com...] right?

I'm sorry maybe I'm missing something but I don't see a footer in any of the examples. I can know the height of the right column in the layout above if that helps at all.

[mapleleaf]

I am not sure, I can;t assume or read his mind

Here is some that may even help you further <>

I am a firm believer of using all tools available to me and the one tool that is one of the best is Google. You can find anything(info) IF you ask the right question; try typing in your question and see what comes up.

mapleleaf

[edited by: SuzyUK at 9:41 pm (utc) on Sep. 16, 2008]
[edit reason] please no non-authority URI's, see charter at top of page, thanks [/edit]

[Marshall]

If you want to add an footer, say 800px wide, add this to your css -

#footer {
width: 800px;
margin: 0
padding: 0;
text-align: center; /* your choice */
clear: both; /* IMPORTANT clears the floating elements */
}

HTML - ADD after the three columns and before closing the outer wrapper -

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

Marshall

[Br3nn4n]

Ahh yes, the clear css element :D

Thank you so much, this works great!

[vivalasvegas]

I've been using CSS Creator to generate 2 and 3 column layouts.

[Br3nn4n]

What I have going right now is amazingly perfect (Thanks Marshall!) but do you have a link?

[Marshall]

What I have going right now is amazingly perfect (Thanks Marshall!) but do you have a link?

Thanks, but a link to what?

Marshall

[SuzyUK]

"glish" is a very old respected site that taught many of us the basics, before my time here actually.. so while their links remain here, can I just remind everyone of the NO non-authority links policy please - see here for more [webmasterworld.com]

CSS Positioning and Layout Techniques have improved greatly since Glish put those samples online (oh my how sad, I can remember when they were NEW :o).. the Float technique used by Marshall and mentioned earlier in this thread is only one way to do a three column layout. The footers are not and will not be present in a layout where AP is used (at least not in Glish as the advanced positioning techniques were simply not in IE's vocabulary back then )

If you do decide to use a generator, please don't blame CSS if your page goes wrong, instead try to blame the fact that sometimes CSS can't be parcelled into a nice neat application - it's not a programming language ;)

anyhow.. pardon my reminder interruption.. and thanks Marshall for the help in this thread ;)

[Br3nn4n]

Haha....I'm using Dreamweaver (but ONLY to immediately see my coding results, not to do wysiwyg design). I have a perfect layout right now, with a footer and a header actually! :) Thank you guys so much!