I like not using a wrapper because when you resize the window the furthest right column goes underneath the next furthest right column instead of making a horizontal scroll bar so I'm wondering, Is is possible to center a 3 column layout without a wrapper? Thanks in advance!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <title></title> <style type="text/css"> #Div1 { background-color: rgb(255,195,195) } #Div2 { background-color: rgb(195,255,195) } #Div3 { background-color: rgb(195,195,255) } #Div1, #Div2, #Div3 { /* give the box size */ padding: 100px 0; width: 33.33%; /* for IE's float-margin bug */ display: inline; float: left; } </style> </head> <body> <div id="Div1"></div> <div id="Div2"></div> <div id="Div3"></div> </body> </html> HTML:
In that case, math20, you will need a wrapper. The wrapper is what allows you to move and control all three columns as a single unit. And, to prevent the right-most column from being pushed to the next line, you need to do exactly what kk5st already said: set the wrapper's width to the sum of the columns' widths. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <title></title> <style type="text/css"> #Div1 { background-color: rgb(255,195,195) } #Div2 { background-color: rgb(195,255,195) } #Div3 { background-color: rgb(195,195,255) } #Div1, #Div2, #Div3 { /* give the box size */ padding: 100px 0; width: 200px; /* for IE's float-margin bug */ display: inline; float: left; } #Wrapper { width: 600px; margin: auto } </style> </head> <body> <div id="Wrapper"> <div id="Div1"></div> <div id="Div2"></div> <div id="Div3"></div> </div> </body> </html> HTML:
I REALLY want to improve my sites speed, and thought css was the way -- but how can your 818 bytes: Load faster then the table version at: 263 bytes <table width="800" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <th width="200" bgcolor="#330066" scope="col"> </th> <th scope="col"> </th> <th width="200" bgcolor="#330066" scope="col"> </th> </tr> </table> HTML: Cheers
The table version is duplicated on every page, while an external CSS stylesheet needs to be downloaded only once. If we imagine there are fifty pages, then the table version is now using over 12 kb, but the CSS version is still only 818 bytes. And, of course, this is an excessively simplistic design. When designs get complicated, tables bloat fast, and the CSS version may even have a smaller file size with just a single page.
Please explain your aversion to using a wrapper for the page as a whole. One of the cornerstones of css based layout is that you can create a styling context that allows everything within the context to be treated as a single unit. The path you've chosen is overly complex and is not generally robust. cheers, gary
I copied and tested your code, and it didn't work in IE or FF. I even tried kicking the browsers into quirks mode, and it still didn't work correctly. math20, according to your first post, your only reason for avoiding a wrapper is because the right-most column is wrapped to the next line. kk5st and I have already shown you how to avoid that, however. Why are you still trying to avoid a wrapper? Even if you do manage to find some complicated way to make it not necessary, it is still useful.
I'm quite impressed with that version other than the fact you used position:absolute; and are now screwed if you want a footer.
You can't honestly think that is better than using a wrapper? I use a wrapper whether I'm going to center my layouts or not. Whether they're 2 column or 4. It just makes sense to plan ahead. Never have I had a problem where I actually had to remove the wrapper to solve it. I'm not saying that problem doesn't exist though. I'm just wondering how a wrapper could "box you in"?
Yeah, a wrapper is probably better and a lot easier but I thought it was interesting to do it this way.
That's a very hackish way to accomplish it... What's the reason for using fixed width for all the columns (and apparently fixed height as well?)? I feel sorry for people who actually buy decent monitors when they have to view a site that uses so little of the space available. Have you tested your solution on a small browser window? Even if people have a high resolution monitor, they may visit your site with the browser only taking a small portion of their screen. The answer to your question, as you've found, is yes. Fixed-size columns can be centered without a wrapper, but why would you want to?