Menu
I am trying to understand the basics of CSS layouting and have some problem with a page being too high when I add a border.
Here comes my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
<div class="links_aussen">
<div class="innen">Rechts</div>
</div>
<div class="mitte_aussen">
<div class="innen">Mitte</div>
</div>
<div class="rechts_aussen">
<div class="innen">Links</div>
</div>
</body>
</html>
I use the following stylesheet:
@CHARSET "ISO-8859-1";
* {
height: 100%;
margin: 0;
padding: 0;
}
html,body {
background-color: grey;
width: 100%;
}
.innen {
border: 1px solid black;
}
.links_aussen {
float: left;
background-color: green;
width: 33%;
height: 100%;
}
.mitte_aussen {
float: left;
background-color: yellow;
height: 100%;
width: 34%;
}
.rechts_aussen {
float: left;
background-color: red;
height: 100%;
width: 33%;
}
And here is jsFiddle
My problem is that this code gives me a nice 100% layout horizontally but creates a scrollbar being to high verticcally. I would like to have no scrollbars but also see the borders (so overflow: hidden; will not help me in this one I think) - tested in Chrome and Firefox.
So: How can I tell my little browser that it should remove 2 pixels from the height so that I can have borders and no scrollbars?
Thanks in advance for any ideas and answers André
288
Here is a solution for you using box-sizing: border-box. It also removes the need for the .inner div.
http://jsfiddle.net/mqchen/xHFvG/
EDIT: If anyone is wondering why this works, look down at Joakim Johansson's post. Now, back at this post. The box-sizing property simply redefines how the browser calculates the size of elements. More about it here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
59
This is because the default box model is content-box, and works like this:
The heights you set changes the "Content" part. So if you have height set to 100%, and border set to 1%, that will add up to 101%.
This is solved in different ways depending on what you're trying to do.
For example you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html to make the height attribute work in different ways.
Can't for the life of me figure out a good solution right now (since relying on box-sizing isn't that compatible), but here's a bad one, using absolute positioning: http://jsfiddle.net/XhfmR/
28
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
