SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard Dean C's Avatar
    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 backgrounds All 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.

  2. #2
    SitePoint Guru alecrust's Avatar
    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

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    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.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    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&#37;;
    		}
    			#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>
    Add .no-left or .no-right to your #center DIV, and then add the .hide-this class to either the left or right column.

    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.

  5. #5
    SitePoint Enthusiast
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 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&#37; 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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 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.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mefisto View Post
    Let me give you a hint, Dan Schulz : unfortunately you are wrong.
    If you're going to say someone is wrong, provide evidence to support the claim. Otherwise it may not be taken seriously.

  9. #9
    Non-Member
    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&#37;;}
    	</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.

  10. #10
    SitePoint Wizard Dean C's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •