CSS Height and Width Aren't Consistent between Parent and Child div

Im trying to create a header that shows a title to the left and a list of buttons on the right. To achieve this have a parent #ChatHeader div, which contains two children divs, #ChatHeaderTitle and #ChatHeaderControls.

For some reason the height of 8vh in the parent div isnt the same as the height of 8vh in the children divs. Both divs have their height set as 8vh but the parent div appears smaller than the child. I am also having the same issue with the width.

Im sure I am missing something obvious, but I have been trying everything I can think of and cant fix it.

Simplified version of my HTML:

<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>

Hear is my CSS:

#ChatHeader {
    width:100%;
    height: 8vh;
    overflow: hidden;

    background-color: #000000;
    color: var(--std-background-colour);   
}

#ChatHeaderTitle {
    height: 8vh;
    width: calc(100% - 8vh);

    padding:1vh;
}

#ChatHeaderControls {
    height: 8vh;
    width: 8vh;

    float:right;
    padding: 1vh;
    font-size:1.5vh;
    color: var(--std-background-colour);
}

Solution

It's always a good idea to do resets on your padding and margins, so you know you're starting from a clean slate.

Fundamental here -- you've got padding on the right-hand div, which expands the div to larger than you want it. Yes, padding is visible on the inside of a div, but it expands the div by the amount of padding. If you want to use 1.5vh of padding, you should make your right div 8vh + 1.5vh = 9.5vh (or 8vh - 1.5vh = 6.5vh, depending on what you've got in your box), instead of 8vh. "By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added."

Also, your second div is floated to the right, but your first div wasn't floated to the left -- so your floats aren't quite right. If you add a left float to the left div, then the right float div is respected.

I've got code below that will work for you. However, if I were you, I'd consider converting this to a grid layout, rather than floated divs -- it'll ultimately make your life easier.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body, #ChatHeader, #ChatHeaderTitle, #ChatHeaderControls {
            padding : 0px ; 
            margin : 0px ; 
        }
        #ChatHeader {
            width:100%;
            height: 8vh;
            overflow: hidden;
            background-color: #000000;
        }       
        #ChatHeaderTitle {
            height: 8vh;
            width: calc(100% - 8vh);
            background-color : pink ; 
            padding:0vh;
            float : left ; 
        }       
        #ChatHeaderControls {
            height: 8vh;
            width: 8vh;
            background-color : blue ; 
            font-size:1.5vh;
            float : right ; 
        }
    </style>

</head>
<body>
<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>
</body>
</html>