CODEWITHSUNDEEP
htmlcsswindowpaddingmargin
user1447853
user1447853

Reputation: 21

Padding and Margin causing my div to be too wide

I have this div:

<!------ CONTENT ------>
<div id="content">
  <div class="top">
  I am cool<br />
  I am cool<br />
  I am cool<br />
  I am cool<br />
  </div>
</div>
<!------ /CONTENT ------>

With this CSS:

#content{
    height:auto;
    width:100%;
    background-color:#FF0000;
}

#content .top{
    margin:15px 35px 35px 35px;
    padding:20px;
    width:inherit;
    height:inherit;
    position:absolute;

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);

    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:rgba(224,224,224,.92);
}

I thought this would make the content div to be as wide as the browser window, and then resizing the .top div to fit inside of that while also having padding and margin (No idea how to explain that well enough), but it does not. Instead .top is just as wide as the screen, but because of the margin it extends to somewhere outside the window and then adds another margin causing it to have a horizontal scrolling bar, like this:

Screenshot

As you can see it should way more to the left, having a margin of 35 and the end of the page should be where the header ends.

I hope this is clear, I have never explained anything like this but I hope someone can help me out here, this is really bugging me.

Upvotes: 2

Views: 3537

Answers (2)

tcmon
tcmon

Reputation: 351

If you disregard floats, position absolute and its ilk: the width:100% refers to the closest enclosing box.

My guess would be that you have an element around your content that is not as wide as you think.

( planting *{border: 1px solid red} somewhere in your css for debugging never hurts ;) )

Upvotes: 1

Eric
Eric

Reputation: 97575

Your problem is that width specifies the inner container width, and that margin and padding are added on.

I don't understand why you're using position: absolute here.

Is this behaving as expected?

Upvotes: 0

Related Questions