ansaurus

Question

How do margins work with div positioning?

Answer 1

A:

The easiest way would be to give your #top-float a height of 280px and drop the top-margin for #content as such:

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        margin: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 0 auto;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#top-float">
    </div>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
  </body>
</html>

If you need em sizing, then give the children of #top-float em sizing, and make sure to give #top-float overflow: hidden;

If you want your content to appear above your header in your markup for SEO purposes, you can do the following:

<html>
  <head>
    <style type="text/css">
      html {
        background: #73ADD7 url(images/gradient.gif) repeat-x;
      }
      body {
        padding: 0;
        margin: 0;
        background:url(images/sky1.jpg) no-repeat center top;
        color: #666;
        width: 100%;
        display: table;     
      }
      #top-float{
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 2.3em;
        height:280px;
      }
      #content {
        width: 890px;
        margin: 280px auto 0;
        background: #fff;
        border: solid 0px #ccc;
        padding: 0px;
      }
      #footer {
        width: 890px;
        margin: 0 auto;
        background:url(images/footer-bg.jpg)
        no-repeat center bottom #fff;
        border: solid 0px #ccc;
        height:250px;
      }
    </style>
  </head>
  <body>
    <div id="#content">
    </div>
    <div id="#footer">
    </div>
    <div id="#top-float">
    </div>
  </body>
</html>

Andrew Moore 2009-07-23 18:37:57

Thanks heaps for this champion! yeah also thanks to all who replied. This is awesome site am just a newbie.thank you.

2009-07-24 03:29:13

Answer 2

+1 A:

Just remove the top margin from your content div, and add the placeholder above it with the height specified.

HTML snip:

<body>
  <div id="header">Stuff</div>
  <div id="content">Body stuff.../div>
</body>

And CSS:

#content {
  margin-top:0;
}

#header {
  height:280px;
}

If it makes more sense for the extra header information to be within the content div (semantically), you can use a negative margin.

HTML snip:

<body>
  <div id="content">
    <div id="header">Stuff</div>
    Body stuff...
  </div>
</body>

And CSS:

#content {
  margin-top:280px;
}

#header {
  margin-top:-280px;
}

Chris Marasti-Georg 2009-07-23 18:38:28

Answer 3

A:

It is a little tricky answering this without also seeing your HTML, but a few suggestions:

Place your #top-float div outside of your content div
Use negative margins
Put your content div flush with the top of the browser with a header div inside. Then put your header image inside your header div as the background image
it doesn't look like you are centering anything so you can also use absolute positioning for the header div

As always, there is no one way of accomplishing this.

Chris Johnston 2009-07-23 18:38:38

Answer 4

A:

You may want to use absolute or fixed positioning for your #top-float div.

Why do you want to put the header image as a background image? I think you'll find that it all works out easier if you don't put the site's header image as a background. It is also common practice that clicking on the site's logo (which I assume is in your header image) takes the user back to the home page. Making the site's logo a background image effectively disables this feature.

Peter Di Cecco 2009-07-23 18:40:36

ansaurus

tags:

views:

answers:

How do margins work with div positioning?

related questions