HTML div height greater than intended

Question

I'm trying to brush up on my HTML and CSS again and I was trying to make a simple layout. Here is the HTML/CSS for my simple site.

<!DOCTYPE html> 
<HTML> 
<HEAD>
   <TITLE>My website</TITLE> 
   <META CHARSET="UTF-8">
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px
    }

    html, body {
        margin:0;
        padding:0;
        height:100%;
        border: 0px;
    }

    #TopBar {
        width:100%;
        height:15%; 
        border-bottom:5px solid;
        border-color:#B30000;
    }

    #MidBar {
        background-color:black;
        height:70%;
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }

    #BottomBar {
        position:absolute;
        bottom:0;
        width:100%;
        height:15%; 
        border-top:5px solid;
        border-color:#B30000;
    }

    h1 {
        font-family: sans-serif;
        font-size: 24pt;
    }

    #HEADER {
        text-align:center;
    }

    li {
        display:inline;
    }

    #copyright {
        text-align: center;
    }
</style>
</HEAD>

<BODY>

<DIV ID="TopBar">
<DIV ID="HEADER">
   <HEADER> 
   <H1>My website</H1> 
   <NAV> 
   <UL>
      <LI><A HREF="./about/index.html">About me</A> 
      <LI><A HREF="./contact/index.html">Contact me</A> 
      <LI><A HREF="http://throughbenslens.co.uk/blog">My blog</A> 
      <LI><A HREF="./portfolio/index.html">My portfolio</A> 
   </UL>
   </NAV> 
   </HEADER> 
</DIV>
</DIV>

<DIV ID="MidBar">
<DIV ID="PhotoSlideshow">
test
</DIV>
</DIV>


<DIV ID="BottomBar">
<FOOTER> 
<P ID="copyright">Name here &copy; 
<?PHP DATE("Y") ECHO ?> </P>
</FOOTER> 
</DIV>

</BODY>
</HTML>

Given the heights I've applied to my div elements I expected everything to line up nicely however it appears that the bottom div is higher than the intended 15% and overlaps onto the middle div, see here demonstrated by the red border at the bottom... div too tall Where am I going wrong? I'm sure it's something simple.

I'd suggest reading up on coding conventions: http://stackoverflow.com/questions/428431/are-there-any-html-coding-conventions-style-standard. HTML tag names and attributes are generally lower case, and class and ID names also generally start with a lowercase letter. — quoo, Jul 24 '13 at 16:48
Also please see this question on why you shouldn't use the *{} as a reset. http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful. I'd start with Eric Meyer's reset: meyerweb.com/eric/tools/css/reset/ — quoo, Jul 24 '13 at 16:49
Yikes, it would seem I still have quite a lot to learn then.. — BML91, Jul 24 '13 at 16:51
These are mostly best practice concerns, so it shouldn't be keeping your code from working. Just thought I should point it out as well since you're just getting started:) — quoo, Jul 24 '13 at 16:53

score 2 · Accepted Answer · edited May 23 '17 at 12:13

You should understand how the box model works... You are using borders which are counted outside the element, so for example if your element is 200px in height, and has a 5px border, the total element size will be 210px;

enter image description here

So considering this as the concept, what you are having elements which sums up to 100%, and you are using borders too, so that is exceeding the viewport which will result in vertical scroll...

Also you don't have to use position: absolute;, you are making it absolute, just to avoid scrolls but that's a wrong approach. Absolute element is out of the document flow, and will give weird results if you didn't wrapped inside a position: relative; element.

Demo

Few Tips :

Use lowercase tags
Avoid Uppercase ID's unless required

Using 100% vertically is very rare, designers generally use width: 100%; for making the layouts responsive. So if you don't have any specific reason to go for 100% vertical elements, don't go for it..

Solution:

Still if you want to stick with the vertical layout spanning to 100% in height, you should use box-sizing: border-box; property...

What box-sizing will do here? Well, using the above property, it will change the default behavior of the box-model, so instead of counting the borders, paddings etc outside the element, it will count inside it, thus it will prevent the viewport to be scrolled.

I will provide you an example, which I had made for another answer.

Demo 2 (Updated, had forgot to normalize the CSS)

Explanation for the above demo, if you look at the CSS, I am using

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

which will make every element paddings, borders etc to be counted inside the element and not outside, if you mark, am using a border of 5px; and still, the window won't get a scroll bar as the border is counted inside the element and not outside.

Thanks for the thorough explanation, a auto indent plug-in I used for notepad++ switched all of the tags to upper-case for some strange reason, but I'll stick to lower-case IDs in the future. — BML91, Jul 24 '13 at 16:57
If I don't define height using a percentage what's the best way of determining the height of div elements so they look nice and even? — BML91, Jul 24 '13 at 16:58
@BML91 Do you have any specific reason to sum up the elements 100% vertically? If no, than just let the elements go in a normal flow... — Mr. Alien, Jul 24 '13 at 16:59
I was hoping to have the top and bottom div be equal in their height so it looks even, and in the centre div have a photo/slideshow.. — BML91, Jul 24 '13 at 17:03
Yep thanks for the thorough answer, highly appreciate it. Now back to tinkering. — BML91, Jul 24 '13 at 17:09

score 1 · Answer 2 · answered Jul 24 '13 at 16:46

There are many things a bit off with your code, however the straight forward answer is that borders are part of the box model, therefore part of the height calculation. So the height of your div is 15% of the height + the width of your borders, thus it is oversized.

Please see this explanation of the box model:

http://css-tricks.com/the-css-box-model/

score 0 · Answer 3 · answered Jul 24 '13 at 16:48

I think it has to do with your borders (each of which is 5px). Since you have your TopBar, MidBar, and BottomBar have percentage heights that add up to %100, WITH additional borders, you have a problem of having an effective height of greater than %100, and then, because you have BottomBar with an absolute position at the bottom, it doesn't force the page to scroll, but simple induces some overlap between the MidBar and BotomBar divs.

score 0 · Answer 4 · answered Jul 24 '13 at 16:51

0

Remove "Position: absolute" from: #BottomBar. That should do the trick.

answered Jul 24 '13 at 16:51

Lance

181
1

HTML div height greater than intended

4 Answers4