troubleshooting Question

Unwanted space between 3 DIV columns

Avatar of pillbug22
pillbug22 asked on
CSS
2 Comments1 Solution1400 ViewsLast Modified:
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;
}
ASKER CERTIFIED SOLUTION
Andrew Maurer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros