Special kind of 3 column layout

**Dean C** · Sep 25, 2007, 03:34

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.

**alecrust** · Sep 25, 2007, 04:13

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!

**Dan Schulz** · Sep 26, 2007, 05:27

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.

**Dan Schulz** · Sep 26, 2007, 05:46

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.

**mefisto** · Sep 26, 2007, 06:02

Let me give you a hint, Dan Schulz : unfortunately you are wrong.

**Paul O'B** · Sep 26, 2007, 06:04

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.

**Paul O'B** · Sep 26, 2007, 06:18

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.

**Dan Schulz** · Sep 26, 2007, 06:27

Originally Posted by mefisto

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.

**all4nerds** · Sep 26, 2007, 06:34

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>

**Dean C** · Sep 26, 2007, 11:44

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

The SitePoint Forums have moved.

User Tag List

Thread: Special kind of 3 column layout

Thread Tools

Display

Special kind of 3 column layout

Bookmarks

Bookmarks

Posting Permissions