White space between DIV's

[Eiolon]

I have a top and bottom image, each in their own DIV.  However, there is white space that I cannot get rid of that is preventing the images from looking seamless.

 

Here is a screenshot of the image:

 

 

The images are in the HEADER and MIDDLE divs.

 

#wrapper {
margin:0px auto;
padding:0;
border:0;
width: 1024px;
}

#header {
margin:0;
}

#container {
margin:0;
padding:0;
}

#left {
margin:0;
padding:0;
float:left;
width:255px;
}

#right {
margin:0;
padding:0;
float:right;
width:255px;
}

#middle { 
margin:0;
padding:0;
float:left;
width:514px;
}

 

<div id="wrapper">
<div id="header">
	<img src="header.jpg" alt="Header">
</div>
<div id="container">
	<div id="left">

	</div>

	<div id="middle">
		<img src="middle.jpg" alt="Middle">
	</div>

	<div id="right">

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

[haku]

Try floating them all left.

[Lostvoices]

just wondering if this works

 

<div style="clear: both;"> </div>

<div id="right">

[Eiolon]

Floating them all to the left and use the clear did not work.  Same result.

[Lostvoices]

then are you sure you're images dont have whitespace on the top or bottom of them?

[Eiolon]

Already did that.  I can make this work with tables, I just know it's not proper to use tables for design elements.

 

I can make it work with absolute positioning, but it only shows properly in IE and not Firefox/Chrome.

[The Letter E]

There's a couple poor coding habits I see here, they MIGHT BE contributing to the problem. Those DIVs you have, left and right, are those to center the middle DIV??

 

Try This:

<div id="wrapper">
   <div id="header">
      <img src="header.jpg" alt="Header">
   </div>
   <div id="container">
      <div id="middle">
         <img src="middle.jpg" alt="Middle">
      </div>
   </div>
</div>

 

CSS:

#wrapper {
   margin:0px auto;
   padding:0;
   border:0;
   width: 1024px;
}

#header {
   margin:0;
}

#container {
   margin:0;
   padding:0;
}

#middle {
   margin:0;
   padding:0;
   width:514px;
   margin-left: auto;
   margin-right: auto;
}

 

I didn't test it. If it doesn't work just let me know and I will put it into production real quick.

 

Hope this helps.

 

E