Unwanted space between 3 DIV columns

Posted on 2007-07-20
Last Modified: 2008-02-27
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" "">
<html xmlns="" >
    <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;
Question by:pillbug22
    LVL 12

    Expert Comment

    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!

    LVL 9

    Accepted Solution

    Here is a link to a layout site.

    Why reinvent the wheel


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now