<html>
<head>
<style>
* { margin:0; border:0; padding:0; }
div { height:500px; }
#container { width:1000px; background-color:#000; }
#column-one { float:left; padding:10px; width:500px; background-color:#234; }
#column-two { float:left; padding:10px; width:500px; background-color:#345; }
</style>
</head>
<body>
<div id="container">
<div id="column-one">
</div>
<div id="column-two">
</div>
</div>
</body>
</html>
Counterintuitive indeed.
The content-box model states that padding and borders don't count in the width
that you set for a box. So they add on to its width
.
Modern browsers support CSS3's box-sizing: border-box
to cause width
to represent the total width of content, padding and borders (the default is, of course, content-box
, triggering the above behavior).
The width is the width your content can fill, not the width of the box delimited by your border.
Maybe I misunderstood but I think you can solve your problem by using width: auto
for the div instead of width: 100%
;
PS: I know the post is old but maybe still can be useful...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With