Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Unwanted space between 3 DIV columns

Posted on 2007-07-20
Medium Priority
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" "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;
Question by:pillbug22
LVL 12

Expert Comment

ID: 19531268
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!


Accepted Solution

Andrew Maurer earned 500 total points
ID: 19531376
Here is a link to a layout site.

Why reinvent the wheel


Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month11 days, 22 hours left to enroll

564 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