Quick Question - Why is there a Space Gap between Divs?

Hello all,

I am beginning a new project.

This is just a simple question about a gap in the divs’ layout. What you see at the page here is the header section. Obviously, it’s a brand new project. You can see the gap between #headerbody and #headerbotm divs. I’m wondering what is the cause of that gap. This should be pretty simple, but I’m still stuck trying everything I can think of.

Oh, and also, I’d like to keep #headercontainer on fixed positioning, so it stays in the same place as the user scrolls down the page of content.

Thanks all and happy holidays, :sunny:


p tags have a default top margin on them. Typically you should use a reset so you don’t run into these issues. However, overriding the margin on a case by case basis will also work.

p#slogan {
  margin-top: 0;

Hi, Tyler.

The gap is the result of the margin of the paragraph escaping from its container. Give me a minute to look at the page and I’ll offer more info.

EDIT: @RyanReese nailed it.

It’s just a margin collapse issue. A 1px padding on #headerbotm (or top border) will suffice.

1 Like

Ty? Why is #headercontainer {position:absolute} ???

Removing {width:100%; position:absolute;} from #headercontainer would work much better!

Remember blocks automatically extend to the full width of the available space.

Thank you, everyone. It’s good to learn more about collapsing margins, and oddz made a great point about p elements.

Also, Ronpat, the width:100% and position:absolute on #headercontainer were wild guesses by me to solve the issue at hand…

OK, Ty. Obviously I’m not sure what the finished product is supposed to look like, so I threw together a few things mainly to give you some code to compare and play with (consider). It isn’t supposed to make sense.

<!DOCTYPE html>
<html lang="en">
    <title>Ship an Engine with First Rate Logistics</title>
    <meta charset="utf-8">
    <meta name="Description" content="How to ship a motor is really very simple. We will show you the steps with pictures, and we will connect you with freight rates from reputable carriers.">
    <meta name="Keywords" content="ship a motor, how to ship an engine, ship an engine, ship a engine">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link href="style/main1.css" rel="stylesheet" type="text/css" media="screen,projection,tv">
<div id="headercontainer">
    <div id="logocontainer">
        <a href="#" title="First Rate Logistics">Ship&ndash;An&ndash;Engine<br>&copy; First Rate Logistics<span></span></a> <!-- logo image -->
    <p id="slogan">The Right Way to Ship Auto Parts!</p>
</div> <!-- #headercontainer -->
/* Ship-a-motor.com and ship-an-engine.com site design */
body {
#headercontainer {
    border:2px solid #f00;
    background:url("headertop.jpg") repeat-x 0 0,url("headerbotm.jpg") repeat-x 0 100%,#096;
#logocontainer {

#logocontainer a {
    outline:1px solid blue;  /* TEST Outline. ToBeDeleted */
#logocontainer a:hover {
/* mac hide */
#logocontainer a {overflow:hidden;}
/* end hide */
#logocontainer a span {
    background:url("headerlogo.jpg") no-repeat 0 -290px;  /* 660 x 370 */
    outline-:1px solid white;  /* TEST Outline. ToBeDeleted */
#logocontainer a span:hover {
    background:url("headerlogo.jpg") no-repeat 0 -210px;  /* 660 x 370 */

p#slogan {
    left: 0;
    font-family:Arial, Helvetica, sans-serif;
    outline:1px solid yellow;  /* TEST Outline. ToBeDeleted */

I did not attempt to create a fixed header without knowing the exact height desired and more about the graphics. May I assume this is supposed to be a fixed width site? If not, you are presently allowing for a tall header that will use up a lot of screen space on smaller devices. Maybe you have something else in mind.

PS: the margin issue was about an “escaping” margin, not a “collapsing” margin (commonly misstated).

Hi Ronpat, and thanks as always for your continued support.

I will plug the new CSS in and work from there. I do want to switch as much units of measurement to % as much as possible, but I’m just in the stage of putting the initial layout, which I’ve seen some other responsive designers use pixels in the initial design.

The goal of the header is to have it sit in place on top with a logo picture. When user is scrolling, the menu stays at the top as the content scrolls under it. The logo that I am trying to place inside #headerbody is located here. I want First Rate Logistics text as an underlay, but I don’t know if I should use an h1 element. Similar things I’ve implemented are located at the h1 header at the WRG home page (the old version), but also you might take a look at the home page link at the bottom that has the hover effect on my section pages.

Ah, I do see the logo image making an appearance. I changed up the image. The main one to be displayed was way too large, so I sized it down, and I changed the CSS up to only show the top image. The smaller sprite available is in the graphics just to switch to when the viewport height is smaller (instead of showing the globe logo image, showing would be the slimmer one). I am also trying to make this logo change to its sprite effect when it is clicked. Simply hovering over the image and it changing is just a bit much and could be a little annoying to the user. Targeting the hover state on the logo has been much better for testing, though.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.