CSS floats and paddings

I have a pretty normal Wordpress Blog, there's main section (static width, floated left) and menu section (aside but used div in example, also static width, floated left).

The point is CSS doesn't "count" paddings as "width", so 100% wide div in my "main section" looks ok, but even 1 pixel padding destroys the whole layout.

The strange thing is when I'm not setting width at all - everything works fine, what's strange t开发者_JS百科o me, because I always thought divs always tend to take as much area as possible (so width: 100% is not the same as no width at all even if in the second case div takes... 100%? what the..? :)).

I have some inline-block elements also and that's even worse, because they never fit to layout:

http://jsfiddle.net/GCFjh/

I know how floats and paddings work, but is there a way of fixing my problem? And I mean real fix, I want my divs to take 100% of the parent-main div, without touching the menu. And I'm not looking for cheats (like overflow hidden) etc., because in real world my main div has paddings also :)

Its simple, put it inside another one and apply padding to the inner div, width to the outer:

<div id='outer' style='width:100%;float:left;'>
   <div id='inner' style='padding:10px;'>
   ...
   </div>
</div>

Try this:

<div style="width: 100%">
    <div class="container">
    Container with paddings
    </div>
</div>

basically, wrap the div tag with padding inside your div with width=100

By far the easiest way is to make use of the box-sizing: border-box property.

This works in all modern browsers and IE8+ (not IE7!).

If you care about IE7 support, the solutions become ugly.

Live Demo

#main div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}