Ive struggling with a problem where my button don't stretch the full height of the parent div. When i hover the button its a ~3px gap from bottom of my button down to the parent divs bottom.
Ive broken down my whole code down to that little code down under here and the problem is still there. If i use float: left; on #main_buttons, #header_big and .buttons the problem is gone. But if i use float on #main_buttons, #header_big my whole site collapses, so that is not a fix without me having to recode the rest of the site as well. Is there any other solution? https://jsfiddle.net/ewktoqrL/
#header_big {
background-color: #cccccc;
min-width: 100%;
min-height: 100%;
float: left;
}
#main_buttons {
min-height: 100%;
float: left;
}
.buttons {
max-height: 100%;
float: left;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 12px;
padding-top: 14px;
}
.buttons:hover {
background-color: #efefef;
}
<div id="header_big">
<div id="main_buttons">
<div id="home" class="buttons">
Home
</div>
<div id="cv" class="buttons">
CV
</div>
<div id="nyheter" class="buttons">
Nyheter
</div>
<div id="movie" class="buttons">
Film
</div>
<div id="games" class="buttons">
Spill
</div>
<div id="music" class="buttons">
Musikk
</div>
</div>
</div>
