Unwanted space between 3 DIV columns

I'm basically trying to setup a 3-column layout for my header, without any spacing between the DIVs to it appears as one "cell". I'm using this to acheive a rounded corner look, so there's an image for each of the 3 columns - 2 rounded corners and one in the middle that repeats and fills 100% width to shrink and grow.

My problme is that I have verticla spaces between each of the 3 DIVs instead of them running up right next to each other. The width of the conrer DIVs is equal to the background image width, which also equals the margins given to the center div. Even If I shrink or grow the corner widths, the space still exists.

I've 0'd out all my elements in the stylesheet to start with, and also added the "fix" I've seen mentioned about IE not liking empty DIV tags. Still no luck.

I've moved over just the basic DIVs and CSS to new pages that I'm trying to fix to avoid any other cross-formatting - both HTML and CSS below.

Thanks in advance,

<!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" >
    <title>Untitled Page</title>
    <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
<div id="master_contentheader_left"><!-- --></div>
<div id="master_contentheader_right"><!-- --></div>
<div id="master_contentheader_middle"><!-- --></div>

body, div, p, h1, h2, h3, h4, ul, li, table
      margin: 0;
      padding: 0;
      border: none;

      background: #B4B4B4 url(images/body_bg.gif) repeat left top;
      font-family: Tahoma, Arial, sans-serif;

      height: 19px;
      width: 6px;
      background: url(images/coltop_left.gif) no-repeat left top;
      float: left;

      height: 19px;
      width: 102px;
      background: url(images/coltop_right.gif) no-repeat right top;
      float: right;

      height: 19px;
      background: url(images/coltop_middle.gif) repeat-x left top;
      margin-left: 6px;
      margin-right: 102px;
Who is Participating?
Andrew MaurerCommented:
Here is a link to a layout site.

Why reinvent the wheel

Hello pillbug22,

Have you tried placing the left & right divs inside the middle div?...

<div id="master_contentheader_middle"><!--
  <div id="master_contentheader_left"><!-- --></div>
  <div id="master_contentheader_right"><!-- --></div>

#master_contentheader_middle {
      height: 19px;
      background: url(images/coltop_middle.gif) repeat-x left top;
        width: 100%;}

I hope this helps!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.