3 equalizing col layout +header +footer

**Dudikowski** · Mar 11, 2009 04:10

I tried Paul O'Bs code (post 1572, p. 63) and it works fine, but in my case I also need the navigation div "mainnav" to overlap the header div.

I changed mainnav to absolute and it works fine in Safari/Firefox but in IE6/7 the mainnav div is not showing.

Code:

#mainnav {
	position:absolute;
	width:900px;
	height:39px;
	z-index:24;
	top:222px;
	text-align: left;
}

What would be the fix for this?

Edit:
I found a fix: add a div that surrounds the mainnav div

**Paul O'B** · Mar 11, 2009 07:15

I found a fix: add a div that surrounds the mainnav div

Glad you found a fix.

**Paul O'B** · Mar 11, 2009 07:19

Originally Posted by rwarren

Hi, I hate to put a damper on this, I am sure it is brilliant CSS, but the right hand column of the initial versin is coded in HTML before the middle (body) column. This means I have to read all the right-hand column before I get to the main body. For people who use screen readers these "floating right" columns are a real pain in the ***. The only way I knew of delivering three columns so that it makes sense to screen readers is to use a simple layout table, one row, three columns. I see that there now is a CSS method that leaves content in a logical order in HTML, but it looks horrenously complicated.
Thanks - Richard

I don't think tables are any easier for screen readers to negotiate and in most cases are in fact harder for them because tables create logical connections that aren't there when tables are used for layout.

For normal html simple skip links will provide the navigation that screen readers will need with a simple skip to the content. It has also been shown that content order has very little impact on SEO.

The order of the html is not an issue with my layout but with the way that floats work in general and there are methods rto remove xcolumns around with css but it's still better to keep things simple. With a table however you can never move the columns around so the argument fails at the first step.

**Dudikowski** · Mar 11, 2009 07:30

I have another question.

The footer image in my case use some extra space above the actual height needed for the actual footer bar (did that make sence?). I start with the container background color on top and fade it out under the footer bar.

The problem I have now is when I try to lower the footer text to the footer bar. If I use line height to lower the text it will provoke the scroll bar to appear. I tried margins and other things but it's just a mess really when comparing Saf/FF/IE6 + 7.

Lets say the background image in the footer is 75px. I need to use a line height number higher than 75px and I think that is the problem.

What would be the best way to fix this problem?

**Paul O'B** · Mar 11, 2009 07:39

Hi,

I'd probably need to see your page code in full to give a proper answer but if you just want to shift the element down a bit without upsetting the flow have you tried adding position:relative to the text eleemnt and moving it down a few pixels with top

xpx etc.

**Dudikowski** · Mar 11, 2009 09:03

Originally Posted by Paul O'B

Hi,

I'd probably need to see your page code in full to give a proper answer but if you just want to shift the element down a bit without upsetting the flow have you tried adding position:relative to the text eleemnt and moving it down a few pixels with top

xpx etc.

Yep that worked. Thanks.

Another footer question:
As I mention my footer is 75px high and in your example it is 24px. The footer height is controlled with this:

Code:

#footer {
    width:730px;
    margin:-25px auto 0;
    height: 24px;
    background-color: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    position:relative;
    z-index:99;
    clear:both;
}
#footer p {
    margin:0;
    padding:0
}
* html #footer {
    height:25px;
    he\ight:24px;
}

In my case I suppose I should chance 24=>75 and 25=>76 (assuming 25 is a 24+1 trick of some sort). But when I increase these numbers the footer starts to eat up the page. The bottom no longer pushes away the footer. I cant find the code that controls this. I see the same problem when I change the numbers in your example.

**Paul O'B** · Mar 11, 2009 09:23

Hi,

There are 3 things in conjunction that control the footer.

1) First is the negative top margin on the footer which must equal the actual height of the footer.

2) the actual height of the footer (which is made up of height padding and borders etc.)

3) The clearefooter which soaks up the space made by the negative margin and stops content overlapping and must be the same as the height of the footer (appprox).

Code:

#footer {
    width:730px;
    margin:-75px auto 0;
    height: 74px;
    background-color: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    position:relative;
    z-index:99;
    clear:both;
}

* html #footer {
    height:75px;/* box model hack for ie5.x*/
    he\ight:74px;
}
#clearfooter {
    height:75px;
    width:100&#37;;
    clear:both
}

There are other methods instead of using a clear footer and you should read the FAQ on putting a footer at the bottom of the window for more info

**Dudikowski** · Mar 11, 2009 10:05

Originally Posted by Paul O'B

Hi,

There are 3 things in conjunction that control the footer.

1) First is the negative top margin on the footer which must equal the actual height of the footer.

2) the actual height of the footer (which is made up of height padding and borders etc.)

3) The clearefooter which soaks up the space made by the negative margin and stops content overlapping and must be the same as the height of the footer (appprox).

Code:

#footer {
    width:730px;
    margin:-75px auto 0;
    height: 74px;
    background-color: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    position:relative;
    z-index:99;
    clear:both;
}

* html #footer {
    height:75px;/* box model hack for ie5.x*/
    he\ight:74px;
}
#clearfooter {
    height:75px;
    width:100%;
    clear:both
}

There are other methods instead of using a clear footer and you should read the FAQ on putting a footer at the bottom of the window for more info

I think there is a semicolon missing there after clear:both at the end.

With this code I get a one pixel border at the very bottom. It shows my background color in the container. I changed it to green temporarily. It shows in all browsers but it will disappear sometimes if I drag up.

**RyanReese** · Mar 11, 2009 10:08

If it is the last declaration in a selector there is no need for a semicolon. Thoguh I always do it just in case if I add something later I don't forget it.
I can't see the attachment to know what you are talking about so I'll wait.

**Paul O'B** · Mar 11, 2009 10:51

I think there is a semicolon missing there after clear:both at the end.

No as Ryan said the last selector in a rule block doesn't need it and being minimalist I omit it on occasions

With this code I get a one pixel border at the very bottom. It shows my background color in the container. I changed it to green temporarily. It shows in all browsers but it will disappear sometimes if I drag up.

This is a weakness of browser makers and nothing t do with my code. The problem is simply that the browsers rounds up or down to a pixel height depending on what the height is and therefore the browser is occasionally 1px out.

What I usually do is make the footer 1px higher than needed and then only drag it upwards by one less pixel than needed thus forcing the vertical scrollbar. It all depends on how picky you are.

All browsers have rounding errors but some are worse than others I'm afraid.

**Dudikowski** · Mar 11, 2009 12:58

Originally Posted by Paul O'B

...

What I usually do is make the footer 1px higher than needed and then only drag it upwards by one less pixel than needed thus forcing the vertical scrollbar. It all depends on how picky you are.

All browsers have rounding errors but some are worse than others I'm afraid.

After some testing it looks like it renders fine if I change the first "74" to "75".

Code:

#footer {
    width:730px;
    margin:-75px auto 0;
    height: 75px;  /* 74px from start */
...

What was the intention with the one pixel lower height?

**Paul O'B** · Mar 11, 2009 14:06

Originally Posted by Dudikowski

What was the intention with the one pixel lower height?

74px height plus 1px for the top border making a total of 75px

**Dudikowski** · Mar 11, 2009 14:17

Originally Posted by Paul O'B

74px height plus 1px for the top border making a total of 75px

Aha! Brilliant!

(stupid me I removed the border before so I was 1 pixel short)

**Dudikowski** · Mar 13, 2009 06:49

I have started to fill the container with my content. I have a problem now where the footer ignores the content and if I shrink the window the footer hovers over my content. What are the ground rules for divs inside the container to avoid this?

**RyanReese** · Mar 13, 2009 07:38

It can't be positioned I would think-also it can't have a z-index higher then the footer.

**Dudikowski** · Mar 13, 2009 07:49

Originally Posted by RyanReese

It can't be positioned I would think-also it can't have a z-index higher then the footer.

I dont think the z-index have anything to do with it. The footer is supposed to stop when it "hits" an obstacle above itself.

**RyanReese** · Mar 13, 2009 08:07

Oh that's normal behavior-maybe Paul knows of a workaround. I'm not into that 3column thing all that much.

**Paul O'B** · Mar 13, 2009 08:12

I have started to fill the container with my content. I have a problem now where the footer ignores the content and if I shrink the window the footer hovers over my content. What are the ground rules for divs inside the container to avoid this?

I'd need to see your code but the points I raised in post #1583 are the technique for keeping the footer clear. If you have manipulated those dimensions incorrectly then the footer will overlap the content.

Or you may have a div in the wrong place or perhaps you haven't cleared something.

You should not be getting an overlap with content on the footer so you have something amiss in your code and I'd need to see it to debug

**Dudikowski** · Mar 13, 2009 16:16

Paul helped me solve my problem. I had some divs with declared height: xxxpx.

**devxtech** · Mar 27, 2009 13:42

Paul,

I'm using one of your 3 column layouts and I've modified it slightly to meet my goals. I have run into a bit of a bind though. It appears that my left and right columns are not spanning to match that of the longest column. My example code shows that the left and right , colored with a shade of gray, do not come down and meet flush with the top of the footer. What am I missing that will make them meet up flush with one another. Also it appears that the right column area if it doesn't have enough content in it will shift the the left column.

The template I'm using as a base is http://www.pmob.co.uk/temp/3col-centred-template10.htm

HTML 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">
<head>
<title>3 Column Fixed Width Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
h1,h2,h3,h4,p {margin-bottom:1em}
ul{margin-left:16px}

/* mac hide \*/
html,body{height:100&#37;;}
/* end hide*/
body { 
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: url(images/long-bg2.gif) repeat-y center top; 
	color:#000;
	text-align:center;
	font-size:x-small;
}

#outer{
	min-height:100%;
	width:765px;
	margin-left:auto;
	margin-right:auto;
	background:transparent url(images/3-colcentred-blueshade.gif) repeat-y center top;
	text-align:left;
	border-left:3px solid #fff;
	border-right:3px solid #fff;
	position:relative;
}
* html #outer {
	width:771px;
	w\idth:765px;
	height:100%;
}
#header, #footer{
	background:#ffffcc;
	border-top:5px solid #fff;
	/* border-bottom:5px solid #fff;  Puts a gap between the header and the menus */
	text-align:center;
}

#header { background-color: green; height: 170px; }

#footer{
	position:absolute;
	/* bottom:0; This fixes the footer to the bottom of the page*/
	left:0;	
	width:765px;
	height:60px;
}
* html #footer {
	height:50px;
	he\ight:40px;
	bottom:-1px;
}
#clearfooter {
	clear:both;
}
#right, #left, #content {
	float:left;
	width:151px;
}

#right, #left { background-color: #5f5f5f; }

#content{width:463px;}
.content1{
	background: #FFF;
	color: #000;
	border-bottom:5px solid #fff;
	padding:5px;
}
.content2{padding:5px;}
.clearer{
	height:1px;
	overflow:hidden;
	clear:both;
	margin-top:-1px;
}

.centeredImage {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#navigation {
	padding-left: 6px;
	font-size: small;
}

#affiliate-logos {
	padding-right: -6px;

}

</style>
</head>
<body>
<div id="outer">
	<div id="header">
		Header
	</div>

	<div id="left">
		<div id="navigation">
			<a class="nav" href="index.php?bod=0">Home</a>
			<br />
			<a class="nav" href="index.php?bod=4">Products</a>
			<br />
			<a class="nav" href="index.php?bod=5">Services</a>
			<br />
			<a class="nav" href="index.php?bod=7">About Us</a>
			<br />
			<a class="nav" href="index.php?bod=8">Contact Us</a>
		</div>

		<div id="left-content">
			<p>Left content goes here : Left content goes here : Left content goes here : Left content goes here : Left content 

goes here : Left content goes here : Left content goes here : Left content goes here : </p>
		</div>
	</div>
	<div id="content">
		<div class="content1">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus 

nunc. Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus 

faucibus dictum. Suspendisse quis felis eget lectus auctor varius. Pellentesque mattis odio nec nibh. Ut at ligula quis quam aliquam 

accumsan. Nulla semper molestie lacus. Sed ante magna, tristique nec, facilisis id, fermentum ut, metus. Nullam accumsan scelerisque 

mauris. Nullam ultricies facilisis nisl. In hac habitasse platea dictumst. Donec molestie ipsum in turpis. Nulla facilisi. Ut tincidunt 

ipsum at erat. Proin ullamcorper nisi rhoncus metus. Integer auctor nibh.</p>
			<br />
			<table cellspacing="1" cellpadding="1" border="0" align="left" width="200">
			    <caption><strong>Store Hours</strong></caption>
			    <tbody>
			        <tr>
			            <td nowrap="">Monday - Wednesday</td>

			            <td nowrap="">am-pm</td>
			        </tr>
			        <tr>
			            <td>Thursday</td>
			            <td>am-pm</td>
			        </tr>
			        <tr>
			            <td>Friday</td>
			            <td>am-pm</td>
			        </tr>
			        <tr>
			            <td>Saturday</td>
			            <td>am-pm</td>
			        </tr>
			        <tr>
			            <td>Sunday</td>
			            <td>am-pm</td>
			        </tr>
			    </tbody>
			</table>
			<br /><img src="./img/emp/001.jpg" alt="">
		</div>
		<div class="content2">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus 

nunc. Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus 

faucibus dictum. Suspendisse quis felis eget lectus auctor varius. Pellentesque mattis odio nec nibh. Ut at ligula quis quam aliquam 

accumsan. Nulla semper molestie lacus. Sed ante magna, tristique nec, facilisis id, fermentum ut, metus. Nullam accumsan scelerisque 

mauris. Nullam ultricies facilisis nisl. In hac habitasse platea dictumst. Donec molestie ipsum in turpis. Nulla facilisi. Ut tincidunt 

ipsum at erat. Proin ullamcorper nisi rhoncus metus. Integer auctor nibh.</p>
			<p>Duis gravida tellus. Integer adipiscing hendrerit urna. Morbi felis lorem, auctor eget, faucibus feugiat, 

aliquet feugiat, mauris. Pellentesque posuere sem eu est. Nulla ac sem. Vivamus felis est, scelerisque quis, consequat vitae, ultricies 

nec, felis. Proin eu urna. Suspendisse faucibus, ante volutpat hendrerit lobortis, orci dolor eleifend nisi, id sodales ipsum libero a 

nunc. Nunc urna ligula, commodo non, mattis ac, lobortis eget, orci. Cras nisi augue, vehicula eu, tristique et, pharetra in, lacus. Nunc 

ut lacus. Sed iaculis purus. Ut in dui at leo vehicula adipiscing. Fusce id magna. Vivamus tristique, sapien vel tempor fermentum, massa 

sapien luctus erat, ac vulputate augue libero sed orci. Curabitur purus augue, cursus a, elementum eget, suscipit ac, dolor. Cras at magna. 

</p>
		</div>
	</div>

	<div id="right">
		<div id="affiliate-logos">
			<img class="centeredImage" src="./img/logos/lenexachamber.png" alt="">
			<img class="centeredImage" src="./img/logos/ncpa.png" alt="">
			<img class="centeredImage" src="./img/logos/kpsc.png" alt="">
			<img class="centeredImage" src="./img/logos/pcca.png" alt="">
		</div>

		<div id="right-content">
			<p>Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right 

content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
		</div>
	</div>
	<div id="clearfooter"></div>
	<div id="footer">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget justo volutpat nibh commodo luctus. Phasellus nunc. 

Etiam fringilla massa id velit. Nulla elit. Maecenas gravida. Quisque in sem a nulla venenatis vestibulum. Proin a est id metus faucibus 

dictum. Suspendisse quis felis eget lectus auctor varius.
		</p>
	</div>
</div>
</body>
</html>

Any help is much appreciated.

**Paul O'B** · Mar 27, 2009 15:21

Hi,

The three columns are floated left so they rely on there being some content to hold the floats apart. You should seta min-height for the columns and that will ensure they stay inp place.

something like this:

Code:

#right, #left, #content {
min-height:100px;
}
* html #right,* html  #left,* html  #content {
height:100px
}
* html #right{float:right}

The columns colours and borders in that particular example are provided by the background image that was placed on #outer.

This is the image I used.

http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

Just make your self a similar image with the colours and borders you require.

Hope that explains it

**devxtech** · Mar 27, 2009 15:47

Originally Posted by Paul O'B

Hi,

The three columns are floated left so they rely on there being some content to hold the floats apart. You should seta min-height for the columns and that will ensure they stay inp place.

something like this:

Code:

#right, #left, #content {
min-height:100px;
}
* html #right,* html  #left,* html  #content {
height:100px
}
* html #right{float:right}

The columns colours and borders in that particular example are provided by the background image that was placed on #outer.

This is the image I used.

http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

Just make your self a similar image with the colours and borders you require.

Hope that explains it

That worked. I also found that by adding a 1px border to the left and right columns is what made it go wacky and make them not line up. One more thing. How do I make the columns all equal height? I want all the columns to expand to the length of the longest column.

**Paul O'B** · Mar 27, 2009 16:51

One more thing. How do I make the columns all equal height? I want all the columns to expand to the length of the longest column.

You can't

(Read the article again

)

That's what the background image is for to give the illusion of equal columns.

That worked. I also found that by adding a 1px border to the left and right columns is what made it go wacky and make them not line up

Did you reduce the width to account for the extra borders. If not then they won't fit and the columns will drop.

However you don't need to add borders and they won't work anyway as you should be adding the borders via the background image (as I've said a few times now)

The equal columns are provided by repeating the background image on the parent that holds all the columns and therefore it will always be as long as the longest column and is the simplest way to do this.

If you don't want to use an image then look at some of the other examples but they are more advanced and more complicated. The simplest method is using the background image as nothing extra needs to be done to the html.

If you are still unsure then ask again and I will try and explain it better

**devxtech** · Mar 28, 2009 13:05

Originally Posted by Paul O'B

If you don't want to use an image then look at some of the other examples but they are more advanced and more complicated. The simplest method is using the background image as nothing extra needs to be done to the html.

Can you point me in the direction of a more advanced/complicated method that will accomplish my goal of totally equal height columns?

The reason I need to ensure all columns are equal is from a template standpoint. I need the template I am providing as a base for customers to allow the most flexible means for graphic design. What I mean by this is I don't want to require them to have to make a repeating background image mandatory in order to maintain a consistent look and feel with my CMS.

Or maybe I'm wrong about needing a more advanced example but right now I'm feeling that I do need it. Maybe you could help explain the benefits of this method over a more advanced one and provide a couple examples of a more advanced method.

Thanks!

**Paul O'B** · Mar 28, 2009 14:39

Can you point me in the direction of a more advanced/complicated method that will accomplish my goal of totally equal height columns?

Equal columns in CSS are mostly an illusion because the only element that will base its height dependent on another unrelated elements is a table-cell.

You could use a 3 cell table to accomplish this or you could use CSS and use "display:table" for browsers such as IE8 and other modern browsers (not IE6 or 7).

However to support IE6 and 7 with a CSS only version you need to use a lot of trickery.

This example uses no images but the CSS is complicated but it will accomplish the illusion of equal columns without the need for images. However it is quite complicated especially if you are not 100% comfortable with css.

Or this example uses a completely different method and overlays absolute column colours to complete the illusion. This is a lot simpler to understand and you basically create your columns as normal (floated) and then you use an absolute technique to bind absolute columns to the relative element.

Read the details here.

There are a number of other methods such as using negative margins on nested elements to again create the column colours but are quite complicated if you don;t fully understand how they work.

Equal columns are the Achilles heel of CSS and until IE8 becomes the standard IE version you will need to resort to trickery or using a table

I also have another short article here that may help.

Hope that points you in the right direction but if you get stuck just shout

User Tag List

Thread: 3 equalizing col layout +header +footer

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions