Menu
I have a problem which I do not understand. If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage). But in fact those values are added to their size which I asume is wrong. Is my expectation wrong? The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
563
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
70
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
