asked on

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,
-chris

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

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

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

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

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

#master_contentheader_middle
{
      height: 19px;
      background: url(images/coltop_middle.gif) repeat-x left top;
      margin-left: 6px;
      margin-right: 102px;
}

oceanbeach

Hello pillbug22,

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

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

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

I hope this helps!

oceanbeach

ASKER CERTIFIED SOLUTION

Andrew Maurer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial