Getting rid of a gap

HTML & CSS
1

I am messing with some css and for some reason it is putting a gap in between the divs. Not in design view in dreamweaver but on the browsers.
here is the code.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mycss.css" />
<title>Template index page</title>
</head>

<body>
<div id="wrapper>

    <div id="header">
  <h2>This is a colored header<br>
  Where's the color?</h2>
	</div><!--end header-->
    
        <div id="pics">
        
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
          <p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
        </div><!--end pics-->
<div class="empty_col">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
<!--end empty col-->

        <div id="log">
        
        </div><!--end log-->

<div id="content">


</div><!--end content-->



</div> <!--end wrapper-->
</body>
</html>

here’s the css

@charset "utf-8";
/* CSS Document */

body {
	background:#666666;
	font:Verdana, Arial, Helvetica, sans-serif small;
}

#header {
	background-color:#CCCCCC;
	width:100&#37;;
	height:48pt;
}

h2
{
	font-size:18px;
	text-align:center;
}

#pics
{
	background-color:#FFCF75;
	width:80%;
	height:28%;
	margin:0 auto;
}

.empty_col
{
	height:10%;
	width:80%;
	margin:0 auto;
	background-color:#FFFFCC;
}

Can anyone help get rid of the gap?
Thanks
Dan

2

OK,
Thanks, you know I hardly ever look at the doctype anymore, I most of the time just trust dreamweaver for that one.
I haven’t written one since my “creating web pages” classes 3 or 4 years ago.
Thank you for the info, I’ll change that.
Dan

3

Is the site up? Can you post a link? Easier for us to play with Firebug and other implements of destruction if we can access the whole site. Though I’m guessing, without actually test-driving your code, that it has something to do with the heights in the divs. You have a strange mix of pixels, percentages, and points (points?!?) in your measurement units.

4

Rayzur, thanks for backstopping me. For some reason, I’ve never had to do battle with the infamous collapsing margin problem (or I was too stupid to recognize it happening), and didn’t recognize it. :wacko:

5

Hi Dan,
What you have is Collapsing Margins working with the default margins of your “h” and “p” tags. It is kind of a complicated subject but one that every newcomer struggles with.

You will basically want to un-collapse margins on the first and last child elements. This can be done with a top/bottom padding or border, or with the overflow property.

I would also take a different approach to your page since you have the header at full width. Just set it outside of the wrapper div first in the source. Now set your 80% width and auto margins on the wrapper and nest all other divs within it. Get rid of that transitional doctype too, always build new pages with a strict doctype. It will help you learn to write code that is up to date. :slight_smile:

Something like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title>

<style type="text/css">

body {
    font:100%/1.2 Verdana, Arial, Helvetica, sans-serif small;
    margin:0;
    padding:0;
    background:#666;
}
#header {
    width:100%;
    padding:1px 0;
    background:#CCC;
}
h1,h2 {
    margin:.25em 0;
    font-size:1.5em;
    text-align:center;
}
h2 {font-size:1.2em;}

p {margin:1em;}

#wrapper {
    width:80%;
    margin:0 auto;
    overflow:hidden;/*contain inner floats and establish margin clearance*/
} 
#pics,
#content,
.empty {
    display:inline-block; /*tripswitch haslayout IE6/7*/
    padding:1px 0;/*1px top/bottom to uncollapse margins*/
    background:#FFCF75;
}
#pics,
#content,
.empty {display:block;} /*tripswitch reset*/

#content {
    background:#CCC;
}
.empty {
    background:#FFC;
}
</style>
</head>
<body>

<div id="header">
    <h1>H1 Heading That Leads Into H2 Headings<br>"All About Fruit"</h1>
</div>

<div id="wrapper">    
    <div id="pics">
        <h2>"Apples"</h2>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, 
        tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra 
        malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo 
        vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque 
        id arcu non sem placerat iaculis.</p>
    </div>

    <div class="empty">
        <h2>"Oranges"</h2> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, 
        tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra 
        malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo 
        vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque 
        id arcu non sem placerat iaculis.</p>    
    </div>

    <div id="log"></div>
    
    <div id="content">
        <h2>"Bananas"</h2> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, 
        tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra 
        malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo 
        vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque 
        id arcu non sem placerat iaculis.</p>
    </div>
</div>

</body>
</html>
6

Okay, I’ve given it a quick once-over, and I think it’s something a bit more mundane. Right now all you have in your content is paragraph-contained text. Browser defaults place spaces between paragraphs. That could be your issue. The heights probably aren’t coming into play just yet, and I don’t think you’re using them correctly anyway. But then, I’m not one of the design Jedis that haunt this place, so it could be something more abstruse.

You also have a lot of validation errors for such a relatively uncomplicated page (in both your HTML and CSS). Try correcting the validation errors and taking another look.