Problems with 3-Column Layout w Sticky Footer

Paul O’ helped me to create a 3-Column Layout with a Sticky Footer this past Fall. (I thought I understood how it worked, but apparently not?!) :frowning:

Here is my code:

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Three Column, Fixed-Width, Sticky-Footer, Colored Columns</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/index.css">
	</head>

	<body>
		<!-- WRAPPER FOR PAGE CONTENTS (minus Page Footer) -->
		<div id="wrapperMinusFooter">

			<!-- PAGE HEADER -->
			<div id="header">
				<h1>HEADER</h1>
				<div id="nav">NAVIGATION</div>
			</div>

			<!-- LEFT COLUMN: NAVIGATION -->
			<div id="col1">COL1</div>

			<!-- CENTER COLUMN: MAIN CONTENT -->
			<div id="col2">
				<h2>COL2</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
			</div>

			<!-- RIGHT COLUMN: SPECIAL ITEMS -->
			<div id="col3">COL3</div>

			<!-- ELEMENTS USED TO CREATE BACKGROUND COLOR FOR ABOVE COLUMNS -->
			<div id="one"></div>
			<div id="three"></div>
		</div>

		<!-- PAGE FOOTER -->
		<div id="footer">FOOTER</div>
	</body>
</html>

index.css


html, body, h1, h2{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;			/* Set a baseline for height. */
}

/* PAGE CONTAINER */
#wrapperMinusFooter{
	width: 930px;					/* Width of Content. */
	min-height: 100%;			/* Based on height of <body>. */
	margin: 0 auto;				/* Center page. */
	margin-top: -40px;		/* Used to offset Footer height. */
	background-color: #CCFFFF;
	/* background:url(images/3colbackground.gif) repeat-y 0 0;	*/
	/* Create the illusion of 3 columns with one background image. */
	border: 0 1px solid #FFFFFF;
  position: relative;		/* Containing Block */	/* NEW */
}

* html #wrapperMinusFooter{		/* IE6 and under only. */
    height:100%;
}

/* HEADER */
#header{
	z-index: 2;	/* NEW */
	position: relative;	/* NEW */
	width: 100%;
	color: #FFFFFF;
	background-color: #000000;
	border-top: 40px solid #FF0000;		/* Offset negative margin of #wrapperMinusFooter. */
}

/* NAVIGATION BAR */
#nav{
	background-color: orange;
}

/* LEFT COLUMN */
#col1{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 150px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: yellow;
}

/* CENTER COLUMN */
#col2{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 630px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: #FFFFFF;

	/*
		==> PROBLEM HERE
		The new line below is breaking the Center Pane?!

		It is causing the Center Pane to shrink upwards
		exposing the baby blue Wrapper below.

		It is also causing the label "COLUMN 3" in the
		Right Pane to move from the top down to the
		bottom of the RIght Pane?!
	*/
	border: 1px solid gray;
}

/* RIGHT COLUMN */
#col3{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: right;

	clear: left;


	width: 150px;
	background-color: #D685AD;
}

/* FOOTER */
#footer{
	clear: both;			/* Keep below columns. */
	width: 930px;
	height: 40px;			/* Matches negative margin on #wrapperMinusFooter. */
	margin: 0 auto;
	background-color: gray;
}

/* OPERA FIX */
body:before{
    float: left;
    width: 0;
    height: 100%;
    margin-top: -32767px;		/* Negates effect of float. */
    content: "";
}

h1, h2, p{
    padding: 0 10px;		/* ?????? */
}

/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after{
    clear: both;
    display: block;
    height: 1%;
    content: " ";
}

/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 150px;
	background: yellow;
}

#three{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 150px;
	background: #D685AD;
}

/* IE6 FIX */
* html #one,
* html #three{
		height: 9999em;
		top: auto;
}

As commented in my code above, I added this simple line of code to my style-sheet in the Center Column/Pane:


	border: 1px solid gray;

[B]After adding this code, it appears that the Center Pane shrinks upwards exposing the baby blue Wrapper below.

It is also causing the label “COLUMN 3” - which used to be in the upper left-hand corner of the Right Pane down towards the bottom left-hand corner of the Right Column?![/B]

I suppose this is happening because of the use of Floats, but I’m not really understanding what is going on, and I need to know how to work around it.

[B]I would expect text in the Right Column to start in the upper-left-hand corner and work its way downward.

I also thought that the Center Pane would maintain a maximum height.
[/B]
Can someone please help me out here?

Sincerely,

TomTees

The following changes to your CSS will fix the problem.

/* RIGHT COLUMN /
#col3{
z-index: 2; /
NEW /
position: absolute; /
Containing Block <<<< CHANGE HERE /
/
float: right; / / REMOVE THIS /
top:0px; /
ADD THIS AND NEXT LINE /
right:0px;
/
clear: left; / / REMOVE THIS */
width: 150px;
background-color: #D685AD;
}

What were those changes supposed to do?

I tried this code, and it didn’t help.

The center pane still shrinks upwards exposing the wrapper DIV. (Which is technically no biggie, but it messes up my plans to put a gray border around the center pane?!

Your code also eliminated the label “COL3” in the right column, so it looks like I have new issues now.

TomTees

That is odd. I have tested the changes in all of the latest browsers and it works fine. When I say that, it moves the words COL3 to the top of the right column and the exposed blue section at the bottom of the center column disaapears.

Did you change the positioning from relative to absolute as suggested?

Attached is a screen-shot of what I see. (Guess you’ll have to wait for that to be approved?!)

And here is my updated style-sheet.


html, body, h1, h2{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;			/* Set a baseline for height. */
}

/* PAGE CONTAINER */
#wrapperMinusFooter{
	width: 930px;					/* Width of Content. */
	min-height: 100%;			/* Based on height of <body>. */
	margin: 0 auto;				/* Center page. */
	margin-top: -40px;		/* Used to offset Footer height. */
	background-color: #CCFFFF;
	/* background:url(images/3colbackground.gif) repeat-y 0 0;	*/
	/* Create the illusion of 3 columns with one background image. */
	border: 0 1px solid #FFFFFF;
  position: relative;		/* Containing Block */	/* NEW */
}

* html #wrapperMinusFooter{		/* IE6 and under only. */
    height:100%;
}

/* HEADER */
#header{
	z-index: 2;	/* NEW */
	position: relative;	/* NEW */
	width: 100%;
	color: #FFFFFF;
	background-color: #000000;
	border-top: 40px solid #FF0000;		/* Offset negative margin of #wrapperMinusFooter. */
}

/* NAVIGATION BAR */
#nav{
	background-color: orange;
}

/* LEFT COLUMN */
#col1{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 150px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: yellow;
}

/* CENTER COLUMN */
#col2{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 630px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: #FFFFFF;

	/*
		==> PROBLEM HERE
		The new line below is breaking the Center Pane?!

		It is causing the Center Pane to shrink upwards
		exposing the baby blue Wrapper below.

		It is also causing the label "COLUMN 3" in the
		Right Pane to move from the top down to the
		bottom of the RIght Pane?!
	*/
	border: 1px solid gray;
}

/* RIGHT COLUMN */
#col3{
	z-index: 2;	/* NEW */
/*
	position: relative;		/* Containing Block */	/* NEW
*/
	position: absolute;	/* NEW2    What does this do?????? */

/*
	float: right;
	clear: both;
*/

	top: 0px;	/* NEW2    What does this do?????? */
	right: 0px;	/* NEW2    What does this do?????? */


	width: 150px;
	background-color: #D685AD;
}

/* FOOTER */
#footer{
	clear: both;			/* Keep below columns. */
	width: 930px;
	height: 40px;			/* Matches negative margin on #wrapperMinusFooter. */
	margin: 0 auto;
	background-color: gray;
}

/* OPERA FIX */
body:before{
    float: left;
    width: 0;
    height: 100%;
    margin-top: -32767px;		/* Negates effect of float. */
    content: "";
}

h1, h2, p{
    padding: 0 10px;		/* ?????? */
}

/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after{
    clear: both;
    display: block;
    height: 1%;
    content: " ";
}

/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 150px;
	background: yellow;
}

#three{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 150px;
	background: #D685AD;
}

/* IE6 FIX */
* html #one,
* html #three{
		height: 9999em;
		top: auto;
}

Like I said before, I still see the baby blue peaking through from the wrapper DIV which isn’t that big of a deal, but the “COL3” text has disappeared.

I’m using FireFox 3.6.13

Thanks,

TomTees

Not sure why it is not working for you, but I have modified it slightly and put it on the internet for you to look at my version.
http://www.grafwebdesign.com/TT/a101220_1.htm

Here is the modified CSS again (comments removed)

/* RIGHT COLUMN */
#col3{
    z-index: 2;
    position: absolute; 
    top: 95px; 
    right: 0px; 
    width: 150px;
    background-color: #D685AD;
}
 

The original CSS floated the element. I have positioned it in the right column, which removes the float conflicts that you have experienced.

I will be interested to see if your browser sees the page in the same way as mine.

Hi,

Don’t add any of those changes above as that changes the whole dynamic of the layout and it won’t work.:slight_smile: Changing the column to absolute removes it from the flow and the footer will never extend if content in that column is longer.

The error is the simplest basic and you added a border to the element so that makes it 2px wider and therefore you must reduce the width by 2px or it won’t fit. You also set the right column to clear so no wonder it starts underneath :slight_smile:
Make only thses 2 changes.


#col2 {
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: left;
   [B] width: 628px;/* 628 + 2 =630*/[/B]
    min-height: 100px;    /* If no content, prevent Floats from moving over to fill space. */
    background-color: #FFFFFF;
    /*
        ==> PROBLEM HERE
        The new line below is breaking the Center Pane?!
 
        It is causing the Center Pane to shrink upwards
        exposing the baby blue Wrapper below.
 
        It is also causing the label "COLUMN 3" in the
        Right Pane to move from the top down to the
        bottom of the RIght Pane?!
    */
    border: 1px solid gray;
}
/* RIGHT COLUMN */
#col3 {
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: right;
    [B]/*clear: left; don't clear it or it will start below !! */[/B]
    width: 150px;
    background-color: #D685AD;
}


Hope that helps :slight_smile:

However, the border will only extend around the actual content which I guess is not what you want. I explained in the original version that the actual content columns are only content height and the illusion of the full columns is created with the absolute overlays.

You can’t add a border to the middle column because it is only content height. You would need to create a third faux column as we have done for the left and right columns and then add the border to that.

here is the revised code with a red border in place so you can see where it is. We can’t put the top border on the absolute overlay because of the iE6 hack so we add it to the middle column real.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Three Column, Fixed-Width, Sticky-Footer, Colored Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/index.css">
<style type="text/css">
html, body, h1, h2 {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;         /* Set a baseline for height. */
}
/* PAGE CONTAINER */
#wrapperMinusFooter {
    width: 930px;               /* Width of Content. */
    min-height: 100%;         /* Based on height of <body>. */
    margin: 0 auto;    /* Center page. */
    margin-top: -40px;    /* Used to offset Footer height. */
    background-color: #CCFFFF;
    /* background:url(images/3colbackground.gif) repeat-y 0 0;  */
    /* Create the illusion of 3 columns with one background image. */
    border: 0 1px solid #FFFFFF;
    position: relative;      /* Containing Block */ /* NEW */
}
* html #wrapperMinusFooter {  /* IE6 and under only. */
    height:100%;
}
/* HEADER */
#header {
    z-index: 2; /* NEW */
    position: relative; /* NEW */
    width: 100%;
    color: #FFFFFF;
    background-color: #000000;
    border-top: 40px solid #FF0000;  /* Offset negative margin of #wrapperMinusFooter. */
}
/* NAVIGATION BAR */
#nav {
    background-color: orange;
}
/* LEFT COLUMN */
#col1 {
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: left;
    width: 150px;
    min-height: 100px;    /* If no content, prevent Floats from moving over to fill space. */
    background-color: yellow;
}
/* CENTER COLUMN */
#col2 {
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: left;
 [B]   width: 628px;
    margin:0 1px;[/B]/*So absolute border remains visible*/
    min-height: 100px;    /* If no content, prevent Floats from moving over to fill space. */
    background-color: #FFFFFF;
    /*
        ==> PROBLEM HERE
        The new line below is breaking the Center Pane?!
 
        It is causing the Center Pane to shrink upwards
        exposing the baby blue Wrapper below.
 
        It is also causing the label "COLUMN 3" in the
        Right Pane to move from the top down to the
        bottom of the RIght Pane?!
    */
[B] border-top:1px solid red;[/B]
}
/* RIGHT COLUMN */
#col3 {
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: right;
    /*clear: left; don't clear it or it will start below !! */
    width: 150px;
    background-color: #D685AD;
}
/* FOOTER */
#footer {
    clear: both;            /* Keep below columns. */
    width: 930px;
    height: 40px;         /* Matches negative margin on #wrapperMinusFooter. */
    margin: 0 auto;
    background-color: gray;
}
/* OPERA FIX */
body:before {
    float: left;
    width: 0;
    height: 100%;
    margin-top: -32767px;      /* Negates effect of float. */
    content: "";
}
h1, h2, p {
    padding: 0 10px;        /* ?????? */
}
/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after {
    clear: both;
    display: block;
    height: 1%;
    content: " ";
}
/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one {
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    background: yellow;
}
[B]#two{
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    width: 628px;
    background: #fff;
    border:1px solid red;
    border-top:none;
}[/B]
#three {
    clear: both;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    background: #D685AD;
}
/* IE6 FIX */
* html #one, * html #three,[B]* html #two [/B]{
    height: 9999em;
    top: auto;
}
</style>
</head>
<body>
<!-- WRAPPER FOR PAGE CONTENTS (minus Page Footer) -->
<div id="wrapperMinusFooter">
    <!-- PAGE HEADER -->
    <div id="header">
        <h1>HEADER</h1>
        <div id="nav">NAVIGATION</div>
    </div>
    <!-- LEFT COLUMN: NAVIGATION -->
    <div id="col1">COL1</div>
    <!-- CENTER COLUMN: MAIN CONTENT -->
    <div id="col2">
        <h2>COL2</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
            felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
            scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
            eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
            dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
            laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
            iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
            dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
            gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
            pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
            commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
            tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
            est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
            faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
            sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
            lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
            vitae non augue. Praesent sit amet fermentum turpis.<br />
            ** This is the last line. ** </p>

    </div>
    <!-- RIGHT COLUMN: SPECIAL ITEMS -->
    <div id="col3">COL3</div>
    <!-- ELEMENTS USED TO CREATE BACKGROUND COLOR FOR ABOVE COLUMNS -->
    <div id="one"></div>
  [B]  <div id="two"></div>[/B]
    <div id="three"></div>
</div>
<!-- PAGE FOOTER -->
<div id="footer">FOOTER</div>
</body>
</html>


If you are still struggling to understand the dynamics the you need to revisit the absolute column article which is combined with the sticky footer method in your example as shown in the css faq.

Yeah, I didn’t think that sound right.

The error is the simplest basic and you added a border to the element so that makes it 2px wider and therefore you must reduce the width by 2px or it won’t fit.

But I thought of that last night and fixed it but I still have the same problem. :confused:

You also set the right column to clear so no wonder it starts underneath :slight_smile:
Make only these 2 changes…


#col2 {
   [B] width: 628px;/* 628 + 2 =630*/[/B]
}

/* RIGHT COLUMN */
#col3 {
    [B]/*clear: left; don't clear it or it will start below !! */[/B]
}


Hope that helps :slight_smile:

Nope, still have the same issues.

Attached is a screen-shot of what I am seeing. (I zoomed out so you can see everything because I can’t on my tiny MacBook screen.)

In addition, here is my updated style-sheet…


html, body, h1, h2{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;			/* Set a baseline for height. */
}

/* PAGE CONTAINER */
#wrapperMinusFooter{
	width: 930px;					/* Width of Content. */
	min-height: 100%;			/* Based on height of <body>. */
	margin: 0 auto;				/* Center page. */
	margin-top: -40px;		/* Used to offset Footer height. */
	background-color: #CCFFFF;
	/* background:url(images/3colbackground.gif) repeat-y 0 0;	*/
	/* Create the illusion of 3 columns with one background image. */
	border: 0 1px solid #FFFFFF;
  position: relative;		/* Containing Block */	/* NEW */
}

* html #wrapperMinusFooter{		/* IE6 and under only. */
    height:100%;
}

/* HEADER */
#header{
	z-index: 2;	/* NEW */
	position: relative;	/* NEW */
	width: 100%;
	color: #FFFFFF;
	background-color: #000000;
	border-top: 40px solid #FF0000;		/* Offset negative margin of #wrapperMinusFooter. */
}

/* NAVIGATION BAR */
#nav{
	background-color: orange;
}

/* LEFT COLUMN */
#col1{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 150px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: yellow;
}

/* CENTER COLUMN */
#col2{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 628px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: #FFFFFF;

	/*
		==> PROBLEM HERE
		The new line below is breaking the Center Pane?!

		It is causing the Center Pane to shrink upwards
		exposing the baby blue Wrapper below.

		It is also causing the label "COLUMN 3" in the
		Right Pane to move from the top down to the
		bottom of the RIght Pane?!
	*/
	border: 1px solid gray;
}

/* RIGHT COLUMN */
#col3{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: right;
	width: 150px;
	background-color: #D685AD;
}

/* FOOTER */
#footer{
	clear: both;			/* Keep below columns. */
	width: 930px;
	height: 40px;			/* Matches negative margin on #wrapperMinusFooter. */
	margin: 0 auto;
	background-color: gray;
}

/* OPERA FIX */
body:before{
    float: left;
    width: 0;
    height: 100%;
    margin-top: -32767px;		/* Negates effect of float. */
    content: "";
}

h1, h2, p{
    padding: 0 10px;		/* ?????? */
}

/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after{
    clear: both;
    display: block;
    height: 1%;
    content: " ";
}

/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 150px;
	background: yellow;
}

#three{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 150px;
	background: #D685AD;
}

/* IE6 FIX */
* html #one,
* html #three{
		height: 9999em;
		top: auto;
}

Sincerely,

TomTees

I used your code above and the layout displays fine and the right column is correctly in place. The border is around the content in the middle and not the full height panel but I explained how to do that above.

Attached is a screen-shot of what I am seeing. (I zoomed out so you can see everything because I can’t on my tiny MacBook screen.)

You forgot to attach the screenshot :slight_smile:

Copy my final code above from post #8 and run it and you should see it all in working order. If that’s not what you wanted then we may be talking at cross purposes.:wink:

Paul,

I tried your code from Post #8 and it does appear to do what I wanted, but if you don’t mind, I would like to get your original code working.

(I believe the code above included a new pane, which is nice, but probably too complicated and too easy to break. I believe in simplicity! Although I will study your code and add it to my bag of tricks.)

Here is my code that is acting funky…

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Three Column, Fixed-Width, Sticky-Footer, Colored Columns</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/index.css">
	</head>

	<body>
		<!-- WRAPPER FOR PAGE CONTENTS (minus Page Footer) -->
		<div id="wrapperMinusFooter">

			<!-- PAGE HEADER -->
			<div id="header">
				<h1>HEADER</h1>
				<div id="nav">NAVIGATION</div>
			</div>

			<!-- LEFT COLUMN: NAVIGATION -->
			<div id="col1">COL1</div>

			<!-- CENTER COLUMN: MAIN CONTENT -->
			<div id="col2">
				<h2>COL2</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
					felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
					scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
					eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
					dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
					laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
					iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
					dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
					gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
					pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
					commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
					tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
					est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
					faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
					sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
					lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
					vitae non augue. Praesent sit amet fermentum turpis.<br />
					** This is the last line. **
				</p>
			</div>

			<!-- RIGHT COLUMN: SPECIAL ITEMS -->
			<div id="col3"><b>COL3</b></div>

			<!-- ELEMENTS USED TO CREATE BACKGROUND COLOR FOR ABOVE COLUMNS -->
			<div id="one"></div>
			<div id="three"></div>
		</div>

		<!-- PAGE FOOTER -->
		<div id="footer">FOOTER</div>
	</body>
</html>

index.css (in css directory)


html, body, h1, h2{
	margin: 0;
	padding: 0;
}

html, body{
	height: 100%;			/* Set a baseline for height. */
}

/* PAGE CONTAINER */
#wrapperMinusFooter{
	width: 930px;					/* Width of Content. */
	min-height: 100%;			/* Based on height of <body>. */
	margin: 0 auto;				/* Center page. */
	margin-top: -40px;		/* Used to offset Footer height. */
	background-color: #CCFFFF;
	/* background:url(images/3colbackground.gif) repeat-y 0 0;	*/
	/* Create the illusion of 3 columns with one background image. */
	border: 0 1px solid #FFFFFF;
  position: relative;		/* Containing Block */	/* NEW */
}

* html #wrapperMinusFooter{		/* IE6 and under only. */
    height:100%;
}

/* HEADER */
#header{
	z-index: 2;	/* NEW */
	position: relative;	/* NEW */
	width: 100%;
	color: #FFFFFF;
	background-color: #000000;
	border-top: 40px solid #FF0000;		/* Offset negative margin of #wrapperMinusFooter. */
}

/* NAVIGATION BAR */
#nav{
	background-color: orange;
}

/* LEFT COLUMN */
#col1{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 150px;
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: yellow;
}

/* CENTER COLUMN */
#col2{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: left;
	width: 628px;		/* Changed from 630px on Dec 20, 2010  */
	min-height: 100px;		/* If no content, prevent Floats from moving over to fill space. */
	background-color: #FFFFFF;

	/*
		==> PAUL O'B
		The new line below is breaking the Center Pane?!

		The label "COL3" in the Right Pane seems to be
		stuck below the bottom border of the Center Pane
		even after making the Center Pane 2 pixels narrower?!
	*/
	border: 1px solid gray;
}

/* RIGHT COLUMN */
#col3{
	z-index: 2;	/* NEW */
	position: relative;		/* Containing Block */	/* NEW */
	float: right;
	width: 150px;
	background-color: #D685AD;
}

/* FOOTER */
#footer{
	clear: both;			/* Keep below columns. */
	width: 930px;
	height: 40px;			/* Matches negative margin on #wrapperMinusFooter. */
	margin: 0 auto;
	background-color: gray;
}

/* OPERA FIX */
body:before{
    float: left;
    width: 0;
    height: 100%;
    margin-top: -32767px;		/* Negates effect of float. */
    content: "";
}

h1, h2, p{
    padding: 0 10px;		/* ?????? */
}

/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after{
    clear: both;
    display: block;
    height: 1%;
    content: " ";
}

/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 150px;
	background: yellow;
}

#three{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 150px;
	background: #D685AD;
}

/* IE6 FIX */
* html #one,
* html #three{
		height: 9999em;
		top: auto;
}

Also, here is what I am seeing on my screen. (Sorry I forgot to attach it before.)

Sincerely,

TomTees

Hi Tom,

Just copied the code you pasted and run it in every browser I’ve got and the right column had not dropped and is in the right position (Ie6, IE7, IE8, Firefox, Safari, Chrome, Opera and then on the Mac Firefox, Safari, Chrome). All are showing the column where it should be.

You’ll have to put your version online for me to test but the code above is rendering fine in every browser I’ve got.

The border on the middle column though will only go around the actual text because as I said before that is not the element that stretches to the bottom. The white background will not go to the bottom either because the background of that middle section is controlled from here:


#wrapperMinusFooter{
    width: 930px;               /* Width of Content. */
    min-height: 100%;         /* Based on height of <body>. */
    margin: 0 auto;    /* Center page. */
    margin-top: -40px;    /* Used to offset Footer height. */
   [B] background-color: #CCFFFF;[/B]
    /* background:url(images/3colbackground.gif) repeat-y 0 0;  */
    /* Create the illusion of 3 columns with one background image. */
    border: 0 1px solid #FFFFFF;
  position: relative;      /* Containing Block */ /* NEW */
}


Change the color above to make the full length white background on the middle section.

If you want a border around the middle section you will need to do as I said before and add the new overlay as shown in post #8. It doesn’t make it any more likely to break and is just one extra div that is tucked well out of the way.

Hope that helps :slight_smile:

There is no other way to get a full height border because none of those other elements have a height (and can’t have a 100% height defined anyway).

Just want to clarify, I am not saying anything about the right column - which is a plum color - “dropping” as you said above.

The problem - as you can see in the screenshot attached above - is that the word “COL3” in the right column moved from the upper left-hand corner of the right column down about 2/3rd’s the way of the column so that now it is just below where the middle column ends?!

It is almost as if adding the gray border around the middle column is somehow acting as a “snag” to keep the word “COL3” from rising up to the top of the right column as it should?!

That is a major problem, because if I try to fill up the right column with, say, links, then they would start 2/3rd the way down from the top.

I am using FireFox v3.6.13 on my MacBook. (I don’t have access to any other computers.)

You’ll have to put your version online for me to test but the code above is rendering fine in every browser I’ve got.

Well, that is why I pasted all of my code above in the post with the screenshot.

The border on the middle column though will only go around the actual text because as I said before that is not the element that stretches to the bottom. The white background will not go to the bottom either because the background of that middle section is controlled from here:


#wrapperMinusFooter{
    width: 930px;               /* Width of Content. */
    min-height: 100%;         /* Based on height of <body>. */
    margin: 0 auto;    /* Center page. */
    margin-top: -40px;    /* Used to offset Footer height. */
   [B] background-color: #CCFFFF;[/B]
    /* background:url(images/3colbackground.gif) repeat-y 0 0;  */
    /* Create the illusion of 3 columns with one background image. */
    border: 0 1px solid #FFFFFF;
  position: relative;      /* Containing Block */ /* NEW */
}


Yeah, I understand that now.

So if I want a gray border around the center column, I can probably just add a gray border to the top, left and right sides, and also turn the wrapper pane to white, and then add a bottom gray border to the wrapper class, and it will appear that it is just one big pane, right?

TomTees

Paul O’,

There is definitely something wrong with the code in my Style Sheet.

Check out my column widths…

#wrapperMinusFooter{
	width: 930px;					/* Width of Content. */

#col1{
	width: 150px;

#col2{
	width: 628px;		/* Changed from 630px on Dec 19, 2010  */

#col3{
	width: 148px;		/* Changed from 150px on Dec 20, 2010  */


I changed the width of Column3 from 150px to 148px and surprisingly the word “COL3” in the right column magically moved back up to the top. (See first attachment.)

So then I hit Command + ‘-’ to zoom out to see the entire layout in my small laptop monitor, and all of a sudden the word “COL3” moves to right below where you could draw an imaginary horizontal line from across the bottom of Column2?! :-/ (See second attachment.)

Funky behavior…

If you (or someone) can help me figure out what is going on that would be great because I have been stuck on this for 2 days now. :frowning:

Tom Tees

The plum colour is not the right floated column :). The right floated column is the one that starts with the word “COL3”. It has no height and sits in the plum background and is the element I have been talking about all along :wink:

So then I hit Command + ‘-’ to zoom out to see the entire layout in my small laptop monitor, and all of a sudden the word “COL3” moves to right below where you could draw an imaginary horizontal line from across the bottom of Column2?! :-/ (See second attachment.)

Ahaaa… At last :slight_smile: We finally got there. That was the vital piece of information I have been trying to get from you all along.

As I said before the layout is probably working on every browser in the world but as you forgot to mention that you were zooming the layout smaller then I had no reasonable chance of identifying that problem lol. Not to worry though :slight_smile:

It seems that when you add a border into the mix and although the widths still add up correctly the zoom function creates a rounding error as it probably accounts for the border separately and ends up making the element too wide and therefore the right floated column drops down to find room underneath the other floats as per usual.

This has nothing to do with my layout and happens to any floated layout when a column has a border.

e.g.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#outer {
    width:900px;
    border:1px solid #000
}
.f {
    width:300px;
    float:left;
    height:300px;
    background:red;
}
.f2 {
    background:blue;
  border:1px solid #000;
  width:298px;
}
.f3 {
    background:green;
}
</style>
</head>
<body>
<div id="outer">
    <div class="f">float</div>
    <div class="f f2">float</div>
    <div class="f f3">float</div>
</div>
</body>
</html>

That’s why I don’t like zoom because it always seems to break layouts and I have my zoom set to “text only” because that’s what I want to read. I don’t want the layout to change.

This is really a browsers feature issue and not a CSS issue but CSS can come to the rescue here and we can offset the browsers bad calculations by adding a negative margin to saok up the difference. This won’t affect the layout at all but will allow for it to zoom smaller (In reality I don’t know anyone who zooms a layout smaller - it’s usually the other way around).

Add this to your code:


#col3{
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: right;
    width: 150px;
    background-color: #D685AD;
    [B]margin-left:-2px;/* stop Firefox from dropping column on smaller zoom*/[/B]
}


That stops the column dropping in my Firefox at smaller zoom but you could increase the negative margin a little if it still drops for you.

Glad we got there in the end :slight_smile:

Wow, this thread has been a good workout for both of us!

(I haven’t looked at your code - or thought about this layout - in over two months.)

I see that now, but we have a contradiction…

In my style sheet I have…

/* RIGHT COLUMN /
#col3{
z-index: 2; /
NEW /
position: relative; /
Containing Block / / NEW /
float: right;
width: 148px;
[B] background-color: #D685AD; /
Plum /
[/B]
/
Added Dec 21, 2010 /
margin-left:-10px; /
Stop Firefox from dropping column on Zoom Out */
}

and

#three{
clear: both;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
background: #D685AD; /* Plum */
}

As you can see, both of these has a “Plum” color background.

Because it has been so long, I guess I forgot that ID’s “#one” and “#three” even existed?!

I have also forgotten what purpose they serve?? :confused:

Should both “#col3” and “#three” have the Plum color background?

Please help me to understand what is going on here again.

Ahaaa… At last :slight_smile: We finally got there. That was the vital piece of information I have been trying to get from you all along.

As I said before the layout is probably working on every browser in the world but as you forgot to mention that you were zooming the layout smaller then I had no reasonable chance of identifying that problem lol. Not to worry though :slight_smile:

We need to move next-door to each other! :slight_smile:

It seems that when you add a border into the mix and although the widths still add up correctly the zoom function creates a rounding error as it probably accounts for the border separately and ends up making the element too wide and therefore the right floated column drops down to find room underneath the other floats as per usual.

Makes sense.

This has nothing to do with my layout and happens to any floated layout when a column has a border.

That’s why I don’t like zoom because it always seems to break layouts and I have my zoom set to “text only” because that’s what I want to read. I don’t want the layout to change.

Okay.

This is really a browsers feature issue and not a CSS issue but CSS can come to the rescue here and we can offset the browsers bad calculations by adding a negative margin to soak up the difference. This won’t affect the layout at all but will allow for it to zoom smaller

Makes total sense!

(In reality I don’t know anyone who zooms a layout smaller - it’s usually the other way around).

As usual, I am the “odd man out”!! :blush:

[B]Why do I do this?

Simple! Because I want to see the entire page on my screen at one time.[/B] (I would think everyone would want to do that when doing web design?!) :-/

You have to realize, Paul, that when you subtract the space taken up on my monitor for FireFox’s header area (i.e. Menu Bar, Address Bar, etc) and the space for OS X’s application icons on that “Display Bar” thingy, I probably only have 5 inches of vertical real-estate to see a web page?! :eek:

So I LOVE FireFox’s ability to quickly Zoom-In (Command + ‘+’) and Zoom-Out (Command + ‘-’) and Zoom-To-Normal (Command + ‘0’) !!! :tup:

Add this to your code:


#col3{
    z-index: 2; /* NEW */
    position: relative;  /* Containing Block */   /* NEW */
    float: right;
    width: 150px;
    background-color: #D685AD;
    [B]margin-left:-2px;/* stop Firefox from dropping column on smaller zoom*/[/B]
}


That stops the column dropping in my Firefox at smaller zoom but you could increase the negative margin a little if it still drops for you.

Glad we got there in the end :slight_smile:

Yep, that fixed the problem!! :award:

(Such a shame that something so simple wasted 3 days of our lives?! :rolleyes: Oh well, it’s all in the learning… )

Thanks for all of your help, Paul!! :tup: (And I’ll look forward to your response for the questions above.)

Sincerely,

TomTees

P.S. Once the Mods approve them, please see the 3 attachments. I am including screen-shots of this corrected page: Zoomed In, Zoomed Out, and Zoomed Way Out to show you that it works in all scenarios now! :slight_smile:

No the colour is only needed on #three but will do no harm on the other element as long as it is sized correctly (although it would rub out any border we set on #three if we left it the same size). (If you change the background colour on the float (#col3) for testing it may help you to visualise what’s going on and see where things are.

#one and #three are absolute overlays that hold no content. They merely provide a full length background colour. This is only possible to do with absolute elements because an absolute element will always know the height of its relative container (it doesn’t work the other way around though unfortunately hence the extra div - a small overhead). (there’s a newer [URL=“http://www.pmob.co.uk/temp/equal-columns-absolute-dec2010.htm”]example here.)

If you look at post #8 you will see that I just added #two to get the full length border on the middle column. If you don’t need borders then the middle column usually gets its background from the main container by default and doesn’t need a special element to do this.

As usual, I am the “odd man out”!! :blush:

[B]Why do I do this?

Simple! Because I want to see the entire page on my screen at one time.[/B] (I would think everyone would want to do that when doing web design?!) :-/

You have to realize, Paul, that when you subtract the space taken up on my monitor for FireFox’s header area (i.e. Menu Bar, Address Bar, etc) and the space for OS X’s application icons on that “Display Bar” thingy, I probably only have 5 inches of vertical real-estate to see a web page?! :eek:

So I LOVE FireFox’s ability to quickly Zoom-In (Command + ‘+’) and Zoom-Out (Command + ‘-’) and Zoom-To-Normal (Command + ‘0’) !!! :tup:

Ok that makes sense and we all work differently. I have large monitors and don’t need to do that (my imac is a 27" monster and my pc is 24").

Yep, that fixed the problem!! :award:

(Such a shame that something so simple wasted 3 days of our lives?! :rolleyes: Oh well, it’s all in the learning… )

Thanks for all of your help, Paul!! :tup: (And I’ll look forward to your response for the questions above.)

No worries, we got there in the end and found an interesting bug in the mix also :slight_smile:

Hi Tom,

First of all you have increased the size by 4px by adding the 2px borders and so you must therefore reduce the width also for #one by 4px. This also means that the content column #col1 is still 150px wide and as you still have an unnecessary background colour on it it will rub out the borders of #one (the absolute element sitting underneath it). Therefore #col1 would need its width reduced also or the content will sit on top of that border.

However, reducing the width would mean all the columns would move so what you should do is remove the unnecessary background colour from #col1. Then reduce its width by 4px and then add 2px padding to each side so that the overall dimension doesn’t change.

Most of this is mathematics. If you add borders or padding to dimensions then the overall dimension increases. You should still consult post #8 where I have carried out all the above changes for that middle column in a similar fashion.

I won’t give you the finished code this time because I think you should be able to work it out now.:slight_smile:

Paul,

So back to my original goal…

I was hoping to add some borders to my layout, and thought it might make sense to have a border around each of the 3 columns/panes.

Why is it that when I add this code…

	border: 2pt Solid Red;

here…

/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
	clear: both;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 150px;
	background: yellow;
	border: 2pt Solid Red;
}

It doesn’t cover all 4 sides, and actually only covers certain bits. (See attachment)

What am I not understanding now?

TomTees

P.S. How do I bold text within the CODE and/or CSS tags here in the SitePoint Editor??

Okay, I’ll try to apply what you said.

But did you see how my test red border go chopped off on the top 1/4 portion?! Why did that happen??


Changing the topic somewhat…

If I want to create a light thin gray line around each of the columns to give some shape and form to my homepage, should I go about it the way that I was trying in this thread, OR would it be easier to just create some simple shape using DIV’s and dump that in a given column?

What I am trying to do is sorta like this link that you referred me to earlier for another reason.

See how they have those vertical rectangles with thin rounded borders to denote the left column and center pane and right column?

I like that look - even SitePoint sorta has that - and I thought the way I was going about it above was the best approach?! But maybe it is easier to use your 3-Column Layout as just a “container” in which I can drop other CSS designs?

Follow me?

Thanks,

TomTees