Question

I’ll try to explain this as simply as possible.

Let’s say I have a logo with the dimensions 150px in width by 40px in height, and I want to contain it at the top of a 820px wide container. In order to use the margin-top property
on the content below, I find myself nesting <div="logo></div> within another container that has the width set to 100%, like so;

<div id="logo_width">
  <div id="logo"></div>
</div>

So far, this has been fine for me as it gets the job done, however I still believe that <div id="logo_width"> (the container with the width set to 100%) is overhead, unneeded, and that there’s a better way to be able to use the margin property properly on content below the logo without it messing up because no container above it has the width of 100%.

Perhaps I’m wrong, but if someone could tell me a way to get around this (if possible), so that I need only have <div id="logo"></div> without nesting it, I would very very much appreciate it :)!!

Answer 1

Not sure what the issue is, but this works.

<div id="container">
    <div id="logo"></div>
</div>

CSS

#container{
    width:820px;
    border:1px solid red;
    height:400px;
}

#logo{
    width:150px;
    border:1px solid green;
    height:40px;
    margin-top:20px;
}

http://jsfiddle.net/jasongennaro/7WQZm/

In this example, #container is your 820px container. div#logo-width is removed.