css three column layout blues

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

what's the deal with 3-column css layout? is it really so hard to achieve? I have to do a site in three-column layout, and I was googling for advice to find a way to do it, but the more I read the more confused I get.... people talk about hacks and all sorts of complications. then I found this and it gives lots of possibilities - but again each seems complicated in its own way. advice?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I don't remember who it was, but someone here turned me onto the following page & it's worked for me every time.
http://www.thenoodleincident.com/tutori ... boxes.html
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

thanks joe, that looks exceedingly useful. I'll test it out as soon as I can. Incidentally what does this kind of css tag mean? why is it mentioning html? Sorry I guess it's a n00b question but then again when you don't know, you ask....
Code: [ Select ]
html>body #top {
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

<html> is actually a valid element for targeting. Some browsers actually apply style to it.
Sometimes people root their CSS selectors targeting at the <html> element so that the rule will override other rules that "could" match, but aren't as strong of a match due to being trumped by the mention of html.

html>body specificly targets the <body> element when it's a child element of <html>. Now technically <body> should always be a child of <html> but the specifity in the way selectors are used can make a difference on which elements they actually end up targeting. I believe, but am not quite sure, that the first of these two trumps the second.
The second is a decendant selector (space) instead of a child selector (>).
Code: [ Select ]
html>body
html body
  1. html>body
  2. html body
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

That makes sense.... sorta :)

but wait, so what's the difference between writing, for instance,
Code: [ Select ]
body {
margin:0;
padding:0;
}
  1. body {
  2. margin:0;
  3. padding:0;
  4. }

and writing
Code: [ Select ]
html>body {
margin:0;
padding:0;
}
  1. html>body {
  2. margin:0;
  3. padding:0;
  4. }
? ...because all of the things we're defining with different styles in css are actually elements set up in the basic html page... aren't they? So why specifically accentuate the 'html>' bit?
I feel like I'm missing something terribly fundamental here.... it's just flying right over my head - whooosh..... :)
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

The > is a child selector.
Let me explain: If you want only the links in a list to be green you can't use this:
Code: [ Select ]
a {
color:green;
}
  1. a {
  2. color:green;
  3. }

Because that will target every link. So instead you can use this one:
Code: [ Select ]
li>a {
color:green;
}
  1. li>a {
  2. color:green;
  3. }

Now only the links who are an direct child of the <li>-tags will be green.

The reason why html> is used in the previous example is to hide a bit of style from IE6 or earlier versions of IE.
Code: [ Select ]
body {
/*some css for old browsers*/
}

html>body {
/* some css for new browsers */
}
  1. body {
  2. /*some css for old browsers*/
  3. }
  4. html>body {
  5. /* some css for new browsers */
  6. }
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

sounds so simple when you say it! thanks for that.... it makes a lot of sense now.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

The Noodle Incident link above is a good one.. I've used that, too. I think a lot of the hacks (like the html<body stuff) are specifically for IE5 so, IMO, they're kind of unnecessary at this point.

The basic idea of 3 columns is pretty simple.. position the left and right divs as absolute with fixed widths and then the center div ends up expanding to fit. Or you can put the whole thing in a wrapper and have everything be fixed width.

Here's another tutorial for 3 columns that has a few more comments about the IE5 hacks.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Personally, I prefer using a float scheme as opposed to an absolute postioning one. When I do a three column site, fixed or liquid, my containers go...

HEADER
FLOAT | FLOAT | FLOAT
CLEAR/FULL-WIDTH
FOOTER

I use margining and padding of the inline elements to create consistent negative spaces.

No hack, no work-arounds - just a simple render flow.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

that sounds the best to me.... anyhow I've made it work this time around - thanks guys. (special thanks to r_t who sent me the sample code to play with)

that thread on different treatment of margins/padding in different browsers sure helped out as well...

just one question dM - do your first two floats float left, and the last one right? or do they all float left? just curious........ are there benefits to doing it one way or another......
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

They all float left...and don't forget to 'clear' ;)

The advantages, to me, are over the last three years the absolute positioning scheme, the way I wrote it, had to be tweaked for early releases of FF and the IE6/IE7 shift. But, the float scheme seems to be pretty consistent as long as you use a good container-content order.
  • ace5p1d0r
  • Expert
  • Expert
  • User avatar
  • Posts: 630
  • Loc: UK

Post 3+ Months Ago

THIS is the article that cleared up any questions I had about three column layouts.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

ace5p1d0r wrote:
THIS is the article that cleared up any questions I had about three column layouts.


Maybe it's because the article is almost 2 years old, but none of his examples work in IE7. They either scroll for a mile, don't reneder the left column or evoke a horizontal scroll bar.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Hey L, I found this for ya hun. Another great CSS resource!

http://css.maxdesign.com.au/selectutorial/
  • ace5p1d0r
  • Expert
  • Expert
  • User avatar
  • Posts: 630
  • Loc: UK

Post 3+ Months Ago

[quote="digitalMediaMaybe it's because the article is almost 2 years old, but none of his examples work in IE7. They either scroll for a mile, don't reneder the left column or evoke a horizontal scroll bar.[/quote]
Really? Damn, I better check that.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 33 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.