ansaurus

Question

Answer 1

+1 A:

How about nesting the Divs?

<html>
 <head>
  <title>Div Test</title>
 </head>
 <body>
  <div class='outerDiv' style=' background-color: red;margin: 0px; padding: 0px 10px;'>
   <div class='innerDiv' style='width: 100%; background-color: yellow; margin: 0px; padding: 0px;'>
    Whatever
   </div>
  </div>
 </body>
</html>

Hope this helps.

Yeodave 2010-01-27 11:50:17

Answer 2

+1 A:

Leave the width at auto. Unless you are doing something like floating it of fiddling with its display (which you shouldn't, given what you are trying to achieve) that will cause the width to use the remaining space.

David Dorward 2010-01-27 11:53:00

Answer 3

A:

That's what the box-sizing attribute is there for. See this guide.

RegDwight 2010-01-27 11:53:08

That's never going to be a solution on any problem in the real world. I'd recommend forgetting that it even exists.

U62 2010-01-27 11:59:56

Answer 4

A:

You could either remove the padding from the component, which would solve your problem directly. However, I'm assuming you won't/can't do this for some reason. Therefore, if the component div will always be inside a parent div, how about setting the parent div's overflow to hidden. Simply add this to the parent element CSS:

.parent {overflow: hidden;}

Anything flowing over the parent should now be hidden.

Tom 2010-01-27 12:20:18

ansaurus

tags:

views:

answers:

Total width of DIV problem

related questions