Help with 3 column div not aligning properly

Oh the l and the 1 look very simliar in Firebug…give me a minute to see what’s going on :). PS-I’m not seeing a drop in IE8, but I am seeing the header push down the content area down a lot.

err yeah the header pushing down the content area is what I mean. It looks good in FF/Opera though :slight_smile:

Hi, use these styles (in top:0; right:0; or left:0; or position;static, remove those properties from your stylesheet (don’t actually set those values lol)

#logo
{
	position:static;
	margin-top:43px;
	float:left;
	top:0;
	left:0;
}
#search
{
	float:right;
	margin-top:96px;
	position:static;
	top:0;
	right:0;
}
#m
{
	margin:0;
	float:left;
	width:801px;
}

THen rearrange your HTML to place the middle before the right (there is no need to setup your 3 col layout like that anyway since the parent is a fixed width

<body>

<div id="ctn">
 <div id="l"> 
  <div id="l1"> </div>
  <div id="l2"> <br /></div>
  <div id="l3"> </div>
 </div>

 <div id="m"> 
  <div id="m1"><img src="images/sidelines_logo.png" id="logo" alt="Sidelines Promotional Products - 

Your one stop promotional products shop"  />
  <img src="images/search.png" id="search" alt="Search our site"  /></div>
  <div id="mM">
   <div id="nL">asdf</div>
   <div id="nR">
     <p>asd60<br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
  </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p><br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
     </p>
   </div></div>
  <div id="m2"> </div>
 </div>
 <div id="r">
  <div id="r1"> </div>
  <div id="r2"> </div>
  <div id="r3"> </div>
 </div>
</div>

</body>

That patches everything up :slight_smile:

I tried what you said and it *almost fixes it, except now more stuff is broken.

Here is the full code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.sidelinesvictoria.com/2_/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sidelines Promotional Products Inc.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<style>
#logo
{
	position:static;
	margin-top:43px;
	float:left;
	top:0;
	left:0;
}
#search
{
	float:right;
	margin-top:96px;
	position:static;
	top:0;
	right:0;
}
#m
{
	border:1px solid blue;
	margin:0;
	float:left;
	width:801px;
}
</style>
</head>
<body>

<div id="ctn">
 <div id="l"> 
  <div id="l1"> </div>
  <div id="l2"> <br /></div>
  <div id="l3"> </div>
 </div>

 <div id="m"> 
  <div id="m1"><img src="images/sidelines_logo.png" id="logo" alt="Sidelines Promotional Products - 

Your one stop promotional products shop"  />
  <img src="images/search.png" id="search" alt="Search our site"  /></div>
  <div id="mM">
   <div id="nL">asdf</div>
   <div id="nR">
     <p>asd60<br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
  </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p><br />
       <br />
       <br />
       <br />
       <br />
       <br />
       <br />
     </p>
   </div></div>
  <div id="m2"> </div>
 </div>
 <div id="r">
  <div id="r1"> </div>
  <div id="r2"> </div>
  <div id="r3"> </div>
 </div>
</div>

</body>
</html>

What exactly is breaking??? :confused:

The white background isn’t stretching the full length of the floats, and the surrounding images (the ones with the glow) aren’t lining up properly with that code.

For one thing remove the border I set on #m (that was just to play around with) and then on “#ctn” add overflow:hidden; to contain the floated columns :slight_smile:

I updated the link (sidelinesvictoria.com/2_/) with the newest ver and took a screenshot of it in case of mis communication lol. I think it’s better than before though due to the fact that IE & firefox both have the same bugs.

Pic: http://sidelinesvictoria.com/2_/images/Sidelines_ff_uhoh.jpg

(picture of footer / bottom of page)

It’s too late to edit but I found the problem. I had to add overflow: hidden; to #mM.

What I posted was working locally (I could see what you were seeing) so I don’t know where we got miscommunication but I’m glad everything is working now :slight_smile: