3 equalizing col layout +header +footer

Gonjiness · October 7, 2004, 2:44pm

Hello Paul,

I’m using your 3-column fluid design, and I have a quick question.

I want each of the three columns to have a header. I have tried using a block h3 that is at 100% width, or another div that is 100% width, but three things happen.

The left column header doesn’t fill up the entire width of the column. (There is some space on the right).
The middle column header fills the middle column, but also pushes the other two columns down.
The right column encroaches on the middle column.

I have tried fixing these problems by adjusting the margins, but in your comments, the negative margins must be smaller than the actual margins for each section.

How do I get each section to have a header?

PaulOB · October 7, 2004, 3:15pm

Hi,

This can be tricky because of the overlap so its best to avoid exact measurements such as 100% etc as they will push things wide.

Bearing in mind that there needs to be a 1px overlap you can shift the element with relative positioning by 1px which shoould effectively keep the overlap but move the element.

Heres an example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \\*/ 
html, body{height:100%;} 
/* end hack */ 
body {
 padding:0;
 margin:0;
 background:pink url(leftcolbg.jpg) repeat-y left top;
 color: #000000;
}
#outer{
 min-height:100%;
 margin-left:130px;
 margin-right:130px;
 background:#F8E7EC;
 border-left:1px solid #000;
 border-right:1px solid #000;
 margin-bottom:-52px;
 color: #000000;
}
* html #outer{
 margin-left:127px;/*3 pixel jog*/
 margin-right:127px;/*3 pixel jog*/
}
* html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
#left {
 position:relative;/*ie needs this to show float */
 width:130px;
 float:left;
 margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
 z-index:100;
}
* html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
* html #right {margin-left:-3px;}
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}
#right {
 position:relative;/*ie needs this to show float */
 width:130px;
 float:right;
 margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
}
#footer {
 width:100%;
 clear:both;
 height:50px;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 background-color: #FF8080;
 color: #000000;
 text-align:center;
 position:relative;
}
* html #footer {/*only ie gets this style*/
 \\height:52px;/* for ie5 */
 he\\ight:50px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
#centrecontent {position:relative;z-index:1}
html > body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
#right h2 {
 position:relative;
 text-align:center;
 background:blue;
 color:#fff;
 border-bottom:1px solid #000;
 margin:0;
 padding:0;
 right:-2px;
}
* html #right h2{right:-3px;}/* for ie*/
#left h2 {
 position:relative;
 text-align:center;
 background:green;
 color:#fff;
 border-bottom:1px solid #000;
 margin:0;
 padding:0;
 left:-2px;
}
* html #left h2{left:-2px;}/* for ie*/
#centrecontent h1{
 position:relative;
 background:orange;
 border-bottom:1px solid #000;
 color: #000000;
 text-align:center;
 margin:0;
 padding:0;
}
 
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer"> 
  <div id="left"> 
	<h2>Testing header</h2>
 <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 : Left content goes here 
	  : </p>
  </div>
  <div id="right"> 
		<h2>Testing header</h2>
 <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 : Right content 
	  goes here : </p>
  </div>
  <div id="centrecontent"> 
	<!--centre content goes here -->
	<h1>Testing header</h1>
  <p>centre content goes here : centre content goes here : centre content goes here : centre content goes here : 
  centre content goes here : centre content goes here : centre content goes here : centre content goes here : 
  centre content goes here : centre content goes here : centre content goes here : centre content goes here :  </p>
  </div>
  <div id="clearfooter"></div>  <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">Footer - | </div>
</body>
</html>

The code is harder because of ie’s 3 pixel jog which comes into effect when manipulating floats. (For more about the 3 pix jog see the FAQ sticky thread).

paul

Gonjiness · October 7, 2004, 4:09pm

Thank you for the quick response Paul.

The solution you gave is almost perfect, but I wanted to know if there was a way of putting the headers in each column with:

The 3 column fluid design that you have (the columns are percentages).
I want the header to cover 100% of the container (just like the footer does), with each separate column having its own separate header. The Sitepoint homepage is more of an example of what I need to do.

Again, the only problem that I am getting is some weird positioning of the headers because of the negative margins.

Is there any way around this?

PaulOB · October 7, 2004, 11:31pm

Hi,

The layout with the fluid columns is very awkward style and if you want something like that then you are better off with a table I’m afraid. The fixed side columns are more robust.

IE has very bad redrawing of percentage columns and rounds the pixels up and down which will break pixel precision layouts.

Hers another fluid version that was done as an exercise but I think its too complicated to use and a table would be more suitable, but here it is anyway


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>3 Column fluid layout - 25% side columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {border:1px solid #000;position:relative}
#cell3 {
 width:100%;
 background:#D1DCE9;
 float:left;
 margin:0;
 color: #000000;
 position:relative;
}
#cell2 {
 width:75%;
 background:#FF9797;
 float:left;
 color: #000000;
 border-right:1px solid #000;
}
#cell1 {
 width:33.3%;
 background:pink;
 float:left;
 border-right:1px solid #000;
}
#cell2a, #cell3a {
 float:right;
 position:relative;
}
#cell2a {width:200%;margin-right:-199.5%;}
#cell3a {width:50%;margin-right:-49.5%;}
* html #cell3a {margin-right:-100%}
p {padding:2px 2px 2px 1em;margin:0}
h1 {background:#ffffcc;text-align:center;margin:0;border-bottom:1px solid #000}
#footer {
 text-align:center;
 height:30px;
 background:silver;
 border-top:1px solid #000;
 clear:both;
}
h1 {margin:0;padding:0;background:red;border:1px solid #000;}
h2 {margin:0;padding:0;background:blue;border:1px solid #000}
html>body h2#rt {position:relative;left:4px;}
html>body h1 {position:relative;left:2px;}
* html h1{ margin-right:-1px}
* html h2#rt {position:relative;margin-left:1px;margin-right:-1px}
</style>
</head>
<body>
<div id="container"> 
  <h1>Three column fluid layout</h1>
  <div id="cell3"> 
	<div id="cell2"> 
	  <div id="cell1"> 
		<div id="cell2a"> 
		  <div id="cell3a"> 
			<!-- Right column content goes here -->
			<h2 id="rt">Header</h2>
			<p>This is some text for the right column : This is some text for 
			  the right column : This is some text for the right column : This 
			  is some text for the right column : This is some text for the right 
			  column : This is some text for the right column : </p>
			<!-- end right column -->
		  </div>
		  <!-- centre column content goes here -->
		  <h1>Header</h1>
		  <p>This layout has 3 equalising fluid columns and doesn't need background 
			images for the column colours. Although this is easy to do with tables 
			its not something that css is really good at and has ro be co-erced 
			a bit.</p>
		  <p>The layout works best with 3 equal columns but can be pushed into 
			25% side columns like this demo. The maths get a bit complicated if 
			you want different columns and ie gets a bit jumpy with it.</p>
		  <p>This is really just an exercise in seeing how css can be manipulated. 
			Hope you find it useful.</p>
		  <p>This is some text for the center column : This is some text for the 
			center column : This is some text for the center column : </p>
		  <!-- end centre column -->
		</div>
		<!-- left column content goes here -->
		<h2>Header</h2>
		<p>This is some text for the left column : This is some text for the left 
		  column : This is some text for the left column : This is some text for 
		  the left column : This is some text for the left column : This is some 
		  text for the left column : </p>
	  </div>
	  <!-- end left column -->
	</div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>

Paul

eisa01 · October 9, 2004, 12:37am

Hey, I’m new here

I’ve used the footer code to stick it at the bottom of my site. Only problem is that I want it to have a margin-bottom: 5px; but I can’t figure out how to do it.

My site: http://home.online.no/~jsamseth/case/home.html
css for site: http://home.online.no/~jsamseth/case/layout.css

Any help appreciated.

kmurphy · October 9, 2004, 7:49pm

Thanks for this great idea.
I will aslo add thanks for the comments about getting away from this sort of using css to mimic tables layout. It would have been a lot easier in the end to try a different design than the traditional… However, this seems to suit what many folks want. And it is what I got going with for the project I am currently working on… speaking of which, I have a question… if you have the time… (by the way, I really really do appreciate all the help you have offered me here in this Sitepoint venue!)

Now the question.
It is a little issue (I think) and I have been staring at it for too long to see whatever the problem is. All is well with Firefox on Windows, and Mozilla on a Linux Machine; but with IE, when one mouses over my left side navigation, the entire main content area shifts slightly upward and to the left. So I imagine there is a border or margin setting that is off. I am using a few different style sheets on this site which is still under way but the issue can be seen here:

http://stanley.server309.com/programs/

After a mouse over the left nav there is a shift, and then that is it until one refreshes or there is a quick shimmy if one is on the left nav and clicks, but again only in IE.

The style sheets used can be seen here:

http://stanley.server309.com/styles/HF3Col.css
(this is the one using your 3 column header and footer idea)

http://stanley.server309.com/styles/leftNav.css
(the one likely causing the issue)

http://stanley.server309.com/styles/tabNav.css
(this is the one used by the top tab navigation)

http://stanley.server309.com/styles/styles.css
(the global formatting and such…)

Thanks again

PaulOB · October 10, 2004, 9:33am

Hi,

The problem is that ie looses the width of items that sre define by margins alone and in this case it never found the right width in the first place.

When you mosue over the links it seems to trigger an algotithm that puts the centre content to the width it should have been in the first place.

However there was a fix for this in my layout which you have stopped workin by accident.


 <div id="centre[b]C[/b]ontent">

You have put a capital C there and the actual style declaration has a lowercase c.


* html #cent[b]recont[/b]ent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

You probably don’t need the margin -bottom in there but the important thing is the height:1% which defeats the 3 pixel jog and also helps ie determine the width of its parent because its width is defined by margin-left and margin-right.

Basically you will need this fix every time you use a layout in ie that has its size determined by margins. (For best practice you should hide the 1% from ie mac as it will obey it. Just put it inside the mac backslash hack that you laready have in your code.

Hopefully that will cure the jumping (it does locally)

Paul

atomi · October 11, 2004, 2:38am

Hello. I dont know if this is of any help but I found you can have a center column expand 100% by adding left and right margins the size of your left and right columns, respectively, making sure you account for any padding you might have.

hth atomi

PaulOB · October 11, 2004, 11:47am

Hi,

Sorry I missed your post

Just add 5px to the negative margin on the container and the footer will be pulled upwards. You will probably need to increase the clearfooter by 5px as well.


#container{
min-height: 100%;
[b]margin-bottom: -29px;[/b]
height: auto;
background-color: #fafafa;
width: auto;
}

Paul

eisa01 · October 12, 2004, 1:53pm

Thanks, that worked flawlessly

kmurphy · October 12, 2004, 7:17pm

Thanks! That worked… me and my typos…

DaveB2 · October 12, 2004, 11:29pm

!

DaveB2 · October 13, 2004, 12:01am

!

DaveB2 · October 13, 2004, 9:31am

!

PaulOB · October 13, 2004, 2:25pm

Hi,

Ie can be jumpy with negative margins and the problem with the background image upsetting the layout is obviously a bug thats related to its dislike of negative margins in certain cricumstances. All the usual fixes failed to find a solution so instead I decide to add a couple of nestings to my layout to accomodate your extra images.

Table:display was used to preserve the 100% height for mozilla (as ie will do this anyway). The content must come inside all the nesting otherwise the images will not expand (which is obvious when you think about it.).

The result is here:

http://www.pmob.co.uk/temp/h100.htm

I had to change your right image to accomodate opera 7 and added 47px to its side so it was offest. Other browsers were fine with a 43px margin on the element but opera needs a width when display:table is used or it collapses to content length.

The footer was cleared as described in the FAQ section so look there for a full explanation.

The layout seems to work in ie6, opera 7.5 and firefox. I would expect ie5 and 5.5. to be able to cope with this but may need some extra tweaking. Not sure about any other browsers though

The only problem is ie’s rounding bug where the bottom right corner image jogs in and out by 1 pixel as the screen is resized. You could probably minimise that by making the whole bottom right bit one image instead of the 2 that you have now.

Hope that helps with your design.

Paul

DaveB2 · October 14, 2004, 10:43am

!

PaulOB · October 14, 2004, 1:20pm

Yes I noticed that problem with your page and your forwarding/masking made it hard for me to test your code as I had to download all your images where usually I just link absolutely to them to test. (In fact the images wouldn’t even show at all)

Theres obviously something ie doesn’t like there so I would avoid using that method if at all possible. As to why, I’ve no idea but someone else may have the answer

Paul

atomi · October 15, 2004, 1:50am

Helllo. A very quick question for the css experts. I have a 3 column layout with a div body container at 665px width that clears both left right of my div header container. Inside this div body container i have a left right and center divs the left is set to block float left and the right is set to block float right at 120 pixels each. the center div is set to 425px box with margins at left and right for 120 px. This works fine in both ie and firefox. However Ive added another div inside the center div for rows of thumbnails. each row is set to clear:both. in Firefox this works fine but ie doesnt like it. ie clears not only the row above it but also the left and right divs inside my div body container. Any workaround to this problem?

kmurphy · October 15, 2004, 2:08am

I am adding this to the note below… I just discovered by moving content from a page that was not working to one that was, chunk by chunk until I found what was causing the problem as I just couldn’t find it any other way… It is the strangest thing, the content between the <h2></h2> tags at the top of the centerContent div causes the content to display half way down the page leaving white space… but only the content as it was exactly, if I added content, took away, changed heading 2 to 3 or 4 or 1, it worked fine, but, as I had it originally, it simply would not display properly… Why I have no idea. It works with more or less characters, it works with or without brackets, but when it is this exact combination, it simply does not cooperate… did I stumble on some wierd browser? Can a header 2 not have this many characters of this font?? Or far more likely, I am wondering what stew of css I have created to cause this… voodoo… For now, I am opting for changing the heading 2 content… All this was happening on this page: http://stanley.server309.com/programs/public/prgNatureWalks.php

And now another tid bit to add… I am getting the same bad behaviour (only in IE) on http://stanley.server309.com/programs/urbanWildlife/coyotes/
and have narrowed it down so far to a rule I made that styles the first line of text in a paragraph…

.line:first-letter {
font:oblique normal bold 1.4em ‘Gill Sans MT’, ‘Gill sans’, ‘Trebuchet ms’, sans-serif;
float:left;
color: #385E0F;
}
.line:first-line {
font:oblique normal 1.2em ‘Gill Sans MT’, ‘Gill sans’, ‘Trebuchet ms’, sans-serif;
color: #385E0F;
}

Not sure why it is only effecting the one page though. So again, I will remove the style rule from the offending page, but man would I like to be able to understand what is going on here… sheeshhh. Long day…

I have left the original post below…

I was hoping you could spare some time to help me find a glitch in a few of my pages… I thought all was going well, until I started pouring through the pages with IE and came across a few pages that were missbehaving…
(I thought I would fix this in a few minutes and well it has been over 8 hours now I am sorry and embarrassed to say!) On a few pages, in IE, the main content insists on displaying more than half way down the page. It seems to be ending up at the same level as the base of the left side navigation. I thought I found the problem in heading tags. This page: http://stanley.server309.com/programs/public/prgNatureWalks.php displays properly when the heading tags for the title are set to heading 3 level, but when set to heading 2 level the main content again starts halfway down the page. I checked to see if the same would happen on the other misbehaving pages (four of which I have 4 now, there was 5, but it seems to have repaired itself… (I wish I knew how it did that… or rather what I did…), but alas, it did not ‘solve’ the problem… The other option I saw that may have fixed it was that I had to ensure there was content in the right column then the main content would appear at the top of the page where it is suppose to. This worked for this page:

  [http://stanley.server309.com/programs/public/prgNatureWalks.php](http://stanley.server309.com/programs/public/prgNatureWalks.php)

  But not for this page:

  [http://stanley.server309.com/programs/urbanWildlife/coyotes/](http://stanley.server309.com/programs/urbanWildlife/coyotes/)

So I am now scanning through pages that work and those that don’t… comparing them line by line, but still no luck so thought that well over 8 hours of toying with this it was time to beg for help… (“Help… help… help!”).

I did have the typo and caps issue and I changed all instances of ‘centrecontent’ to ‘centerContent’ throughout the site… The style sheets are here:
The style sheets used can be seen here:

  [http://stanley.server309.com/styles/HF3Col.css](http://stanley.server309.com/styles/HF3Col.css)
  (this is the one using your 3 column header and footer idea)
  
  [http://stanley.server309.com/styles/leftNav.css](http://stanley.server309.com/styles/leftNav.css)
  (the one likely causing the issue)
  
  [http://stanley.server309.com/styles/tabNav.css](http://stanley.server309.com/styles/tabNav.css)
  (this is the one used by the top tab navigation)
  
  [http://stanley.server309.com/styles/styles.css](http://stanley.server309.com/styles/styles.css)
  (the global formatting and such...)
  
  Thanks yet again

PaulOB · October 15, 2004, 8:16am

Opera and Ie will clear any floats above them in the html and not just those in the same context. The usual solution is to enclose the ceontent in that section in an element thats is a float itself and therefore it can’t clear itself and only clears other elements inside that float.

Of course I’d need to see the code to make sure this was the problem -but try it and see

I will look back at the end of the day as I am away for the day but I will check it out later for you - hope thats ok (unless anyone else beats me to it of course).

Paul

Topic		Replies	Views
3 column layout - footer HTML & CSS	6	4279	October 8, 2014
Modern holy grail - 3 col layout HTML & CSS	10	1974	January 28, 2011
3 columns, best compatibility possible, need advice HTML & CSS	16	409	November 16, 2010
3 Equal-Height Columns CSS Liquid Layout HTML & CSS	8	951	August 23, 2010
Equal height columns using css HTML & CSS	12	1100	August 12, 2010

3 equalizing col layout +header +footer

Related topics