SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: Special kind of 3 column layout
-
Sep 25, 2007, 03:34 #1
- Join Date
- Mar 2003
- Location
- England, UK
- Posts
- 2,906
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Special kind of 3 column layout
I'm sure this has been asked before, and I did do a search, but sifting through the mass of CSS threads on multi-column layouts proved to be a nightmare.
What i'm looking to do is have a fixed width layout of say 700px width. Then within that I'd have 3 columns. A left column of width 150px, center column of width 400px and a right column of width 150px. However, what I want to be able to do, is that if I decide not to include the div for the left hand column, or the right hand column, or both, then the center column will expand into the space that was once occupied by the other columns.
The thing that makes this slightly easier than other 3 column layouts is that the background colour of all 3 divs is white, so I don't need to stretch any backgroundsAll i have to worry about is the width of the columns.
I need to support IE6+, Firefox, Opera.Last edited by Dean C; Sep 25, 2007 at 04:34.
-
Sep 25, 2007, 04:13 #2
- Join Date
- Jun 2007
- Location
- London, UK
- Posts
- 728
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Quite tricky the expanding out if a column isn't there bit. Ill subscribe to this thread to see how other people deal with it!
Honda Civic Forum - UK Civic Forum
Web Host Reviews - Independent, honest host reviews
My Portfolio - Simplicity is the ultimate sophistication
-
Sep 26, 2007, 05:27 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Unfortunately what you want to do will not work unless you attach an ID to the body container and then feed different styles to each ID since the middle column will have to have an inner wrapper you can apply margins to so the other columns can ride up as needed, depending on which order they appear in the HTML source.
The alternative to that is JavaScript.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 26, 2007, 05:46 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Never mind Dean, here's something you can use. You need to assign classes to make it work though.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="A brief description of the current Web page goes here." /> <meta name="keywords" content="keywords, for, this, page, go, here, only, once, page, content, has, been, finished" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #000; color: #FFF; } #container { margin: 0 auto; width: 700px; } #center { background: #CFC; color: #000; float: left; width: 100%; } #wrapper { margin: 0 150px; } #center .no-left { margin: 0 150px 0 0; } #center .no-right { margin: 0 0 0 150px; } #left { background: #FFF; color: #000; float: left; margin-left: -100%; width: 150px; } #right { background: #FFF; color: #000; float: left; margin-left: -150px; width: 150px; } .hide-this { position: absolute; left: -999em; } </style> </head> <body> <div id="container"> <div id="center"> <div id="wrapper"> Center Column </div> </div> <div id="left"> Left Column </div> <div id="right"> Right Column </div> </div> </body> </html>
If you want to do this automatically (hopefully) without forcing a page refresh, use some JavaScript to dynamically apply and remove the class via the DOM.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 26, 2007, 06:02 #5
- Join Date
- Aug 2007
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Let me give you a hint, Dan Schulz : unfortunately you are wrong.
-
Sep 26, 2007, 06:04 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Dean,
You can do this by using overflow:auto on the middle wrapper and then theres no need for margins or width on the middle element. It will just take up the space that's available. That's is the correct behaviour of overflow and why it also allows elements to clear floats because they must take into account non-visible content such as floats.
Here is an example in a two column layout. The javascript just hides the column to show what happens and does no class chainging or anything like that.
http://pmob.co.uk/temp/2col-into-onecol.htm
IE doesn't understand overflow:auto but you get the same effect by forcing "haslayout" using the height :1% hack.
You can simply add a third left column to the above and the middle will adjust automatically.
The only thing to watch for is to make sure that you don't have any content in the middle that will overflow or you will get scrollbars (or use overflow:hidden which still makes the middle keep clear.).
Otherwise use a method like Dan's above just to switch the class or change the dimensions.
-
Sep 26, 2007, 06:18 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I Just updated the original example to a fixed width 3 column toggle.
http://www.pmob.co.uk/temp/3col-overflow-toggle.htm
Hope its of some use.
-
Sep 26, 2007, 06:27 #8
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 26, 2007, 06:34 #9
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Easy and no 3 pixel jog of IE 5 5.5 6, and yes this has been asked before 2X with the same requirement, others a show hide of the columns
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>No width, No margin, No 3 pixel jog</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!--[if IE]> <style type="text/css"> * html .main{float:left;} * html .main p{height:1%;} </style> <![endif]--> <style type="text/css"> *{margin: 0;padding: 0;} .wrapper{ margin:0 auto; overflow:auto; /* background:#ccffcc;clear test */ } head+body .main{overflow:auto;} .left{float:left;} .right{float:right;} p{padding:5px 5px 0 5px;} .p{text-align:right;} .wrapper{width:700px;} .wc{width:150px;} .leftx{display:none;} .rightx{display:none;} </style> </head> <body> <div class="wrapper"> <div class="right wc"><p>Right Right</p></div> <div class="left wc"><p>Left</p></div> <div class="main"> <!-- --> <p>No width's</p> <p class="p">No left right margin on content box</p> <p>No Float drop adding padding margins borders</p> <p>No drop when floats are cleared in content box</p> <p>No 3 pixel jog</p> <p>No box model problem IE 5 5.5 6</p> <p>Any number of columns</p> <p>Mix em px % etc. for magins padding and borders width's</p> </div> </div> </body> </html>
Last edited by all4nerds; Sep 26, 2007 at 10:38.
-
Sep 26, 2007, 11:44 #10
- Join Date
- Mar 2003
- Location
- England, UK
- Posts
- 2,906
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the solution folks. I'd given up hope earlier today and farted around with dynamically changing the class on the center column, so it's nice to see so many replies
Bookmarks