3 equalizing col layout +header +footer

**RyanReese** · Mar 31, 2009 11:49

http://www.pmob.co.uk/temp/2colmac.htm
http://www.pmob.co.uk/temp/mac3column.htm

Which one was the one that failed in Opera? Is it actually impossible in Opera or have you not been able to do it-if it is impossible, then why?

**Paul O'B** · Mar 31, 2009 12:05

Hi Ryan,

The opera problem is a consistent problem with the 100% height routines and which we spoke about in relation to sticky footer techniques.

The problem is that on first load Opera is fine but if you resize the browser window vertically the footer (or the 100% height element) doesn't follow suit unless you refresh once the window has been moved. This has to be a vertical movement because a horizontal movement usually triggers a refresh in some way.

In newer versions of Opera the 100% height also fails unless you use position:absolute on the body of use an overflow on html.

There are ways around it but the best way to make Opera work is to use an old safari min-height trick of using a 100% height 0px wide float as in my early demos which is why they always worked in opera.

You can se it in action here.

http://www.pmob.co.uk/temp/sticky-footer2.htm

Hope that answerrs your question.

**RyanReese** · Apr 1, 2009 07:10

Yea it does thanks.

**RyanReese** · Apr 1, 2009 14:45

http://www.pmob.co.uk/temp/sticky-footer2.htm

That is not a sticky footer, it is not sticking to my browser...the content is making it go too down...not what you wanted correct?

**Paul O'B** · Apr 1, 2009 15:49

not what you wanted correct?

It's doing exactly what it was designed to do.

I think you may be misunderstanding what a sticky footer is. A sticky footer is not a fixed footer.

A sticky footer is designed to sit at the bottom of the viewport on pages where there is not much content. This avoid the problem where you only have a couple of lines of text (such as an a small contact page or similar) which looks strange with the footer being high up the page.

However on pages that have more content than can fit in the viewport the footer sits at the bottom of the document content below the fold as per normal. A fixed footer on the other hand always sits at the bottom of the viewport and the content scrolls behind it.It is not the same as a sticky footer.

**RyanReese** · Apr 1, 2009 16:01

What if you want the content to scroll instead :O..I gotcha now lolz.

**whisher** · Apr 12, 2009 08:22

Hi.
Sorry to disturb you.

I don't understand why on earth
ie 6 go nuts with this layout:

Code HTML4Strict:

<!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="it" lang="it" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow" />
<meta name="content-language" content="it" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="bookmark" href="/favicon/favicon.ico" />
<meta name="author" content="Whisher" />
<title>&nbsp;Php&nbsp;&rsaquo;&nbsp;Home</title>
<style type="text/css">
	/* GENERAL TAGS */
* {
	margin: 0;
 	padding: 0;
    outline: none;
}
a:link, a:visited,a:hover,a:active{
	text-decoration: none; 
}
img,fieldset{ 
	border:none;   
}
ul,ol{
	list-style: none;
}
h1{
   font-size: 2em;
}
h2{
	background: #93c3cd url('../images/pattern-container.png') repeat left top;
	text-indent: 10px;
   	font-size: 1.2em;
   	color: #333333;
}
h3{
   font-size: 1.2em;
}
h4{
   font-size: 1em;
}
p{
   font-size: 1em;
}
blockquote, input, li, select, th, td  {
   font-size: 1em;
}
div{
   text-align: left;
}
th, td{
   text-align: left;
}
code, tt, pre{
	font-size: 120%;
}
hr{
	display:none;
}
/* MAIN */
body {
	font-size: 80%;
 	font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
	background-color:#FAE3E8;
	text-align:center;
	color: #111111;
}
#container {
	width: 980px;
	background-color:#93c3cd;
	border:1px solid #ff6b7f;
}
/* HEADER */	  
#header{
	height: 120px; 
	background: #db4865 url('../images/header-background.jpg') no-repeat left top;
}
#header h1{
	height: 120px; 	
	font-size: 1em;
} 
#header h1 a,#header h1 a:hover{
	height: 120px;
	display: block;
	font: normal 1em Georgia, "Times New Roman", Times, serif;
	color:#ffffff;	
} 
/* NAVIGATION */
#navigation{
	height: 50px;
	background-color: #35414f;
	border-top:1px solid #ff6b7f;
	border-bottom:1px solid #2c4359;
}
#navigation li {
	display: inline;
	padding-right: 10px;
}
#navigation li a,#navigation li a:hover{
	line-height: 50px;
}
#navigation li a{
	color: #e1e463;	
}
#navigation li a:hover {
	background-color: #e1e463;
	color: #35414f;	
}
 
/* CONTENT */
#left-content {
	margin-left:-199px;/* must be 1 pixel less than width*/
	float:left;
	width:200px;/* must be same as left margin on #wrapper-content*/
	position:relative;
	left:-2px;/* line up exactly */
	display:inline;/* ie fix*/
}
 
#right-content {
	margin-right:-199px;/* must be 1 pixel less than width*/
	float:right;
	width:201px;/* must be same as right margin on #wrapper-content*/
	position:relative;
	right:-2px;/* line up */
	display:inline;/* ie fix*/
}
#center-content{
	padding:10px;	
}
#wrapper-content {
	background-color:#DAEBEE;
	margin-left:200px;
	margin-right:201px;
}
/* 3 pixel jog*/
* html #left-content{margin-right:-3px;}
* html #right-content{margin-left:-3px;}
/* mac hide and combat ie's 3 pixel jog \*/
* html #center-content{overflow:hidden;float:left;width:100%}
* html #wrapper-content {height:1%;}
#footer {
	clear:both;
	height:50px;
	background-color:#db4865;
}
#footer h3 a,#footer h3 a:hover{
	line-height:50px;
	color:#ffffff;
}
/* UTILITIES */
.center{
	margin:0 auto;
}
.clearer{
	height:1px;
	overflow:hidden;	
	margin-top:-1px;
	clear:both;
}
 
/* LEFT-CONTENT TREE */
#menu-tree{
	width: 195px;
	margin-left: 5px;
	background-color: red;
}
/* RIGHT-CONTENT WINDOWS */
 
table.features{
	width: 200px;
}
table.features thead{
	display: none;
}
table.features tr.feature-style-1{
	font-weight: normal;
}
table.features tr.feature-style-2{
	font-weight: bold;
}
table.features tr.feature-style-3{
	color: #ff3853;
	font-weight: bold;
}
table.box-image td{
	vertical-align: middle;
	text-align:center;
	background-color: red;
}
table.box-image td img{
	vertical-align: middle;
}
 
 
 
 
</style>
</head>
<body>
<div id="container" class="center"> 
	<div id="header">
    	<h1><a href="/" title="Php ">Php</a></h1>
 
  	</div> <!-- end of header -->
  	<div id="navigation">
    <ul class="nav current-index"><li class="index"><a href="index.php" title="index">Home</a></li><li class="chisiamo"><a href="/chisiamo" title="chisiamo">Chi siamo</a></li><li class="contatti"><a href="/contatti" title="contatti">Contatti</a></li></ul>  	</div> <!-- end of navigation -->
  	<div id="wrapper-content"> 
		<div id="left-content">
		<h2>Store</h2>
 
			<ul id="menu-tree" class="menu-tree">
                <li><a href="?id=88" title="Bicilcletta" class="selected">Bicilcletta</a><ul>
                    <li><a href="?id=90" title="Bicicletta da donna">Bicicletta da donna</a></li>
                    <li><a href="?id=103" title="Bicicletta da corsa">Bicicletta da corsa</a></li>
                    <li><a href="?id=100" title="bicicletta da uomo">bicicletta da uomo</a></li>
                    <li><a href="?id=101" title="Bicilcette da bambino">Bicilcette da bambino</a></li>
 
                </ul></li>
                <li><a href="?id=89" title="Accessori">Accessori</a><ul>
                    <li><a href="?id=94" title="Guanti">Guanti</a><ul>
                        <li><a href="?id=95" title="Lana">Lana</a></li>
                        <li><a href="?id=96" title="Cotone">Cotone</a></li>
                    </ul></li>
                    <li><a href="?id=98" title="Parabrezza">Parabrezza</a></li>
 
                </ul></li>
                <li><a href="?id=92" title="Abbigliamento">Abbigliamento</a><ul>
                    <li><a href="?id=102" title="Mutande">Mutande</a></li>
                </ul></li>
                <li><a href="?id=97" title="Moto">Moto</a></li>
</ul>
		</div> <!-- end of left-content -->
 
	    <div id="right-content"> 
 
     		<div class="windows">
<h2>Vetrina</h2>
<table class="features" cellpadding="0" cellspacing="1">
<caption>Coppi extra special</caption>
<thead>
<tr><th>Nome</th><th>Descrizione</th></tr>
</thead>
<tbody>
<tr class="box-image">
	<td colspan="2">
 
	<a href="/2c00557b82.jpg" title="coppi-bicicletta-corsa" rel="lightbox">
<img src="/thumb_2c00557b82.jpg" alt="coppi-bicicletta-corsa" title="coppi-bicicletta-corsa" class="punch" />
</a>
	</td></tr>
		<tr class="feature-style-1">
	<td>Gearing :</td>
	<td>Shimano extra xl</td>
	</tr>
		<tr class="feature-style-1">
 
	<td>Frame :</td>
	<td>Allumin carbon extra</td>
	</tr>
		<tr class="feature-style-3">
	<td>Price :</td>
	<td>2000 eur</td>
	</tr>
 
	 <!-- end feature -->
	</tbody>
</table>
	 <!-- end item -->
 
</div>
<div class="windows">
<h2>Offerte</h2>
<table class="features" cellpadding="0" cellspacing="1">
<caption>Free auto cycle</caption>
<thead>
<tr><th>Nome</th><th>Descrizione</th></tr>
 
</thead>
<tbody>
<tr class="box-image">
	<td colspan="2">
	<a href="/3e5c600f6d.jpg" title="Free_Bicycle_Screens" rel="lightbox">
<img src="/thumb_3e5c600f6d.jpg" alt="Free_Bicycle_Screens" title="Free_Bicycle_Screens" class="punch" />
</a>
	</td></tr>
		<tr class="feature-style-2">
	<td>Frame :</td>
	<td>extra</td>
 
	</tr>
		<tr class="feature-style-1">
	<td>Gearing :</td>
	<td>Shimano extra</td>
	</tr>
		<tr class="feature-style-3">
	<td>Price :</td>
 
	<td>1000 eur</td>
	</tr>
	 <!-- end feature -->
	</tbody>
</table>
	 <!-- end item -->
 
</div>
<div class="windows">
<h2>Usato</h2>
 
<table class="features" cellpadding="0" cellspacing="1">
<caption>Classic</caption>
<thead>
<tr><th>Nome</th><th>Descrizione</th></tr>
</thead>
<tbody>
<tr class="box-image">
	<td colspan="2">
	<a href="/7bbbde37fc.jpg" title="bicicletta classica" rel="lightbox">
<img src="/thumb_7bbbde37fc.jpg" alt="bicicletta classica" title="bicicletta classica" class="punch" />
</a>
	</td></tr>
 
		<tr class="feature-style-1">
	<td>Gearing :</td>
	<td>Manuale base</td>
	</tr>
		<tr class="feature-style-1">
	<td>Frame :</td>
	<td>Ferro pieno</td>
 
	</tr>
		<tr class="feature-style-3">
	<td>Price  :</td>
	<td>800 eur</td>
	</tr>
	 <!-- end feature -->
	</tbody>
</table>
 
	 <!-- end item -->
 
</div>
 <!-- end window -->
 
 
 
	    </div> <!-- end of right-content -->
 
    	<div id="center-content"> 
      		      		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
 
<p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
 
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor</b>. Ut fringilla. Suspendisse potenti. <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Nunc feugiat mi a tellus consequat imperdiet. <b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
 
		</div> <!-- end of center-content -->
 
    	<div class="clearer"></div>
  	</div> <!-- end of wrapper-content -->
  	<div id="footer"> 
    	<h3><a href="/" title="Php fake shop">Php</a></h3>
  	</div> <!-- end of footer -->
</div> <!-- end of container --></body>
</html>

without the tables in right-content it
works fine.

Bye.

**Paul O'B** · Apr 12, 2009 09:13

Hi,

You have added 10px padding to the center-content and as it is already 100% wide that makes it too big and throws everything out.

Code:

#center-content {
    /*padding:10px;*/
}
* html #center-content {
    overflow:hidden;
    float:left;
    width:100%
}

Remove the padding from #center-content and apply it to an inner element instead, or apply to existing inner elements to save adding extra divs.

#center-content p{padding:0 10px;margin:.5em 0 1 em}

**whisher** · Apr 12, 2009 10:11

Originally Posted by Paul O'B

Hi,

You have added 10px padding to the center-content and as it is already 100% wide that makes it too big and throws everything out.

Code:

#center-content {
    /*padding:10px;*/
}
* html #center-content {
    overflow:hidden;
    float:left;
    width:100%
}

Remove the padding from #center-content and apply it to an inner element instead, or apply to existing inner elements to save adding extra divs.

#center-content p{padding:0 10px;margin:.5em 0 1 em}

Thanks

**taylorsatula** · Apr 15, 2009 10:13

Ya but you could do a if IE stylesheet

**RyanReese** · Apr 15, 2009 10:46

That is more work then simply typing in * html #elemtn.

**Stomme poes** · Apr 15, 2009 10:51

^yes. It's also harder to get back to later. With a single CSS sheet, you can ctrl+f anything : )

I'm sure Paul has one somewhere but there's also the matryoshka float trick for 3-colomn height (though depending on how you do it you can get an unwanted vertical scrollbar). A float in a float in a float in a float.

**RyanReese** · Apr 15, 2009 12:43

What's the "matryoshka" float trick

**Paul O'B** · Apr 15, 2009 13:13

Originally Posted by RyanReese

What's the "matryoshka" float trick

See here for Stommes previous example.

It has limited use as one column controls the other two (unlike my methods where each floated columns pulls all the other ones with it.

).

**RyanReese** · Apr 15, 2009 13:17

Oh that's what thats' called? Awesome. I used to call it equal floating columns trick to my friends.

**Kysmiley** · Apr 15, 2009 18:17

Hi there Paul I am looking at your layout for the 2 colum main with the sidebar on the right. My wife likes the layout. When I tried to look at the coding it only showed the the HTML coding. When I brought up the CSS coding it was all garbled. Would you still have this CSS coding somewhere?
Pat

**RyanReese** · Apr 15, 2009 18:23

If you have the link to the live page (for us) then I can provide you the CSS.

**Kysmiley** · Apr 15, 2009 20:21

Thanks Ryan this is the URL... http://www.pmob.co.uk/temp/2col_main.htm after I have the main CSS body I will be able to make changes to background and text or what my wife wants. She is the BOSS she yells I jump LOL

**Stomme poes** · Apr 16, 2009 00:26

Look at the HTML again. A few lines down from the top you'll see this:
<link href="2columngray.css" rel="stylesheet" type="text/css" />

The href is where the CSS is. so, http://www.pmob.co.uk/temp/2columngray.css

which is here:

Code:

/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
html,body {
		margin: 0;
		padding: 0;
}
body {		
		font: x-small arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-color: #e0e0e0;
}
		
#container {
		margin-left:auto;
		margin-right:auto;
		width: 730px; 
		min-height:100%;
		text-align: left;
		background: #CEE0E1 url(images/toddbg.gif) repeat-y right top;
		border-left: 1px solid #a1a1a1;
		border-right: 1px solid #a1a1a1;
        position:relative;
		}
/* commented backslash hack v2 \*/ 
* html #container {height:100%;}		
* html #container {width:732px;w\idth:730px;}
* html body{font-size:xx-small;f\ont-size:x-small}
/* end hack */ 

#mainheader {
		position:absolute;
		left:0;top:0;
		height: 160px;
		width:100%;
		background-color: #fff;
		border-bottom: 1px solid #e6e6e6;
		z-index:1;
}
#header {
		height: 125px;
		width:100%;
		background-color: #D1DCE9;
		margin: 0px 0px 5px 0px;
		border-top: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
		position:relative;
		z-index:2;
		overflow:hidden;
}

* html #mainheader {height:161px;he\ight:160px}
* html #header {height:127px;he\ight:127px}
#mainnav {
		width:100%;
		height: 20px;
		background-color: #f5f5f5;
		border-top: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
		position:relative;
		z-index:2;
}
* html #mainnav{height:22px;he\ight:20px}		
#sidebar {
		float: right;
		width: 170px;
		padding:5px 0 ;
}
#content {
		width: 553px;
		padding:5px 0 ;
		}
#content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:0 5px 5px 5px}		
#footer	{
		position:absolute;
		bottom:0;
		width:100%;
		height: 24px;
		background-color: #f5f5f5;
		border-top: 1px solid #e9e9e9;
}
#footer p {margin:0;padding:0}
* html #footer {height:25px;he\ight:24px;}

.divider1 {
	width:100%;
	height:5px;
	overflow:hidden;
	background:#fff;
	position:relative;
	border-bottom: 1px solid #e6e6e6;
}

#clearfooter {height:27px;width:100%;clear:both}
.blank , .blank2 {
	position:absolute;
	left:547px;
	width:7px;
	height:0px;
	overflow:hidden;
	border-top:	1px solid #fff;
}
.blank {top:-1px;}
.blank2 {bottom:-1px;border-top:1px solid #fff;
}

Though it looks pretty old, and likely can be done in Strict.

Originally Posted by Ryan

Oh that's what thats' called? Awesome. I used to call it equal floating columns trick to my friends.

Heck, I dunno what it's called. Some guy from India showed it to me and it reminded me of those Russian dolls (matryoshka dolls, a doll in a doll in a doll) so, the name fits.

**Paul O'B** · Apr 16, 2009 03:28

Though it looks pretty old, and likely can be done in Strict.

Yes that's from 2003 and is in desperate need of updating

I've put the css in the head to make it easier to grab. (That example uses a background image for the columns and some nasty empty elements to rub out the background.)

**Kysmiley** · Apr 16, 2009 05:51

Thanks I did find the CSS coding before but for some reason when I opened the file it was all garbled, full of little sqaure boxes in place of text.
Pat

**Stomme poes** · Apr 17, 2009 00:23

Sounds like it was opened as something other than a text file, and whoever was opening the file didn't know to treat it like text. Like looking at an image file in a text editor-- looks pretty weird and garbled.

**tga** · May 1, 2009 03:00

Hey Paul ... u the man !.... I was stuck on a equal column 100% height problem but with the help of your thread that began in 2003

... helped me out very much and also your layout website. The trick with the image repeat duz the work, im quite happy with this

.

Thanks alot.

**csspisces** · May 6, 2009 04:35

ClevaTreva's link isn't working any more...

**Paul O'B** · May 6, 2009 08:54

Originally Posted by csspisces

ClevaTreva's link isn't working any more...

If you tell me which post it was in I'll remove it

User Tag List

Thread: 3 equalizing col layout +header +footer

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions