Home/ Questions/Q 8499627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:43:07+00:00

I am trying to understand the basics of CSS layouting and have some problem

  • 0

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é

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0