Self Expanding three column layout - help

**kofifred** · Oct 26, 2012 12:35

Hello Guys,

I would be grateful if someone could write a code for a CSS layout with five regions.

The five divs to be contained in a div ("wrap" - 960px)

1. Header - 960px wide, 90px height
Below header:
2. Left side bar - div id = "left bar" - 180px wide, 210px height
3. Middle section (Content) - div id = "content" - 600px wide, 210px height
4. Right side bar - div id = "right bar" - 180px wide, 210px height
The above point 2,3 and 4 are all below the header.

5. Footer - div id = "footer". 960px wide, 100px height
The footer is below the three columns 2,3 and 4.

My biggest problem is I don't know how to make the pages to self expand downwards
if I fill the content or side bars with more information.

I have spent so many days trying to do it and haven't been able to.
I would very much appreciate if someone would help me with this.

Kind regards

Kofifred

**dresden_phoenix** · Oct 26, 2012 12:47

welcome to SitePoint, Kofi

It's a bad idea to use heights on elements.
remove that and your regions will naturally expand to fit the content. If for some reason you want those heights to be a starting point then use min-height. instead of height ( if you also wish to support older IE you will need to add a conditional comment with the same values as height ( because old IE interprets height: as min-height anyway.

Hopefully that helps.

**Paul O'B** · Oct 26, 2012 13:27

Hi,

It would have been better if you had posted what you had tried so we could see where you had got to and help you learn how to do it

Here's the basics but you will need to ask about anything you don't understand otherwise you won't be able to learn form it

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1, p {
	margin:0 0 1em;
	padding:0 10px;
}
.outer {
	width:960px;
	margin:auto;
	border:1px solid #000;
}
.header {
	min-height:88px;
	background:green;
	padding:1px 0;/*stop margin-collapse*/
}
.main {
	width:960px;
	display:table;
}
.sidebar, .sidebar2 {
	width:180px;
	display:table-cell;
	background:red;
}
.content {
	width:598px;
	display:table-cell;
	border-right:1px solid #000;
	border-left:1px solid #000;
	background:blue;
}
.footer {
	clear:both;
	padding:1px 0;/*stop margin-collapse*/
	background:yellow;
	min-height:98px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.sidebar, .sidebar2,.content{float:left}
.footer{zoom:1.0}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
		<div class="header">
				<h1>Header</h1>
				<p>Ie8+ get equal columns. IE7 and under get content height columns</p>
		</div>
		<div class="main">
				<div class="sidebar">
						<p>left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content </p>
				</div>
				<div class="content">
						<p>middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content </p>
				</div>
				<div class="sidebar2">
						<p>right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column t </p>
				</div>
		</div>
		<div class="footer">
				<p>footer</p>
		</div>
</div>
</body>
</html>

**kofifred** · Oct 27, 2012 03:32

Originally Posted by dresden_phoenix

welcome to SitePoint, Kofi

It's a bad idea to use heights on elements.
remove that and your regions will naturally expand to fit the content. If for some reason you want those heights to be a starting point then use min-height. instead of height ( if you also wish to support older IE you will need to add a conditional comment with the same values as height ( because old IE interprets height: as min-height anyway.

Hopefully that helps.

Hello,

I tried but it still didn't work. Text overflowed the footer if I filled the content or side bars with lot of information.

But thanks for your advice and help.

Kofifred

**kofifred** · Oct 27, 2012 03:47

Hello,

Thanks for the code you wrote for me. Sorry I didn't send what I had written myself; I had written too many of them trying all sort of things but I must quickly say that your code worked perfectly as I wanted. What is new to me in your code is the "display: table", "display: table-cell" and the hacking of IE. I would study it well and if I don't understand it, I would please write to you hoping to receive your help again.

Many thanks

Kofifred

**Paul O'B** · Oct 27, 2012 03:50

Hi,

display: table and table-cell are available in IE8+ and allow us to mimic the behaviour of tables with css. It's not a replacement for tables but just allows css layout to mimic certain table behaviours such as equal columns. If you don't need equal columns then the floated version would be just as good and work in older IE which is what the conditional comments are doing for ie7 and under.

**cheesedude** · Dec 4, 2012 17:12

Originally Posted by Paul O'B

display: table and table-cell are available in IE8+ and allow us to mimic the behaviour of tables with css. It's not a replacement for tables but just allows css layout to mimic certain table behaviours such as equal columns. If you don't need equal columns then the floated version would be just as good and work in older IE which is what the conditional comments are doing for ie7 and under.

Have we reached the stage where display:table is the preferred method of creating a columned layout or are floated divs still the way to go? I was wondering where the state of the art is today. I am creating a new personal site and I intend to support IE8 and up. display:table seems much less hassle than floats and supporting IE7 seems pretty simple as Paul shows. One day we will turn the corner and get away from floated columns and their limitations such as unequal column height. But are we there yet?

**ralph.m** · Dec 4, 2012 17:20

Originally Posted by cheesedude

One day we will turn the corner and get away from floated columns and their limitations such as unequal column height. But are we there yet?

We need as many options as possible, as there will never be 'one method that fits all needs'. One problem with CSS-table layouts is that there is far less flexibility in page structure, which can be a big turn-off. At this point, I'd never consider CSS tables for a whole page layout, It's much more useful for small sections of a page.

**Paul O'B** · Dec 5, 2012 03:26

As Ralph said it does depend on the job in hand but I find I am using display:table a lot more for those awkward equal column scenarios. It's also useful when you need to space blocks apart without the usual column drop when you resize the window. However that can be a drawback as cells never wrap and eventually won't compress anymore but floats will wrap to a new line and allow the element more space.

Of course you could use media queries and change the layout to floated for smaller screen sizes and get the best of both worlds.

You have to be careful with display:table in that heights become a minimum and that min-height and max-height are undefined in the specs for table elements.

User Tag List

Thread: Self Expanding three column layout - help

Thread Tools

Display

Self Expanding three column layout - help

It worked!

Bookmarks

Bookmarks

Posting Permissions