help with forcing a div to stay within it's wrapping div.

[Darkmatter5]

I have the following items in my CSS

 

#wrap { width: 1000px; position: relative; padding: 0 5px 0 5px; margin: 0 auto; background-color: #FFFFFF; }

#content { padding: 1em; width: 75%; position: relative; }

.status { width: 100%; padding: 5px; border-style: double; border-color: #A9A9A9; }

 

Here's my HTML

<div id="wrap">
  <div id="content" style="float: left;">
    <div class='status'>test</div>
  </div>
</div>

 

The resulting render in the browser has the status div pushing to the edge of content, but not obeying the padding of content. Why not?

[KevinM1]

The box model: http://www.w3.org/TR/CSS2/box.html

 

Since you don't define the padding (or margin) for "content", they're set as that div's content area.  Also, you set the width for "status" to be 100%.  This means that it's 100% of it's containing element - "content."  So, "status" fills up that entire area.

[Darkmatter5]

Can you clarify your first sentence?

"Since you don't define the padding (or margin) for "content", they're set as that div's content area."

 

As per the CSS code:

#content { padding: 1em; width: 75%; position: relative; }

I thought I was defining the padding for "content".  My intention is to have a 1em padding for Content and anything within content, should conform to that padding and not render passed that padding.

 

Thanks for the help!

[KevinM1]

Can you clarify your first sentence?

"Since you don't define the padding (or margin) for "content", they're set as that div's content area."

 

As per the CSS code:

#content { padding: 1em; width: 75%; position: relative; }

I thought I was defining the padding for "content".  My intention is to have a 1em padding for Content and anything within content, should conform to that padding and not render passed that padding.

 

Thanks for the help!

 

Ach, sorry...completely missed that.  Hmm...and the padding for "status" should be working to.  I'm betting at least part of it is that you're using relative positioning.

[Darkmatter5]

It's not because wrap and content are classes and status is a class is it?

[haku]

Take the 100% width off of status - that forces it to be wider than it should inside the floated element. Without that, it will automatically default to the proper width, obeying the padding of the containing element.