Div's are hanging on scaling the browser window.

[NorseMan]

It is the background image that is scaling, but the two div's is not. I have removed the img_div so I have just big_div and nav_div left. I thought that maybe this would help. I discovered that it is not the nav_div that is not scaling when I minimize the browser window. It doesn't follow the background picture with the logo and graphic. Because the background picture is scaling as it should. The problem occurs when I minimize the browser window, and the div above is not scaling like the background image inside the DIV. The background image is scaling because of this one:

First, I thought that the navigation bar was hanging on the same place and the other div above actually was scaling. But that wasn't the problem. The problem occurs when the background image is scaling, but the div's is not. How to make this work I don't have a clue, but I hope someone here has and can help me. Please, tell me how to solve this problem.

I hope this is enough information when I include the screenshot showing the browser window minimized. The nav bar should be directly below the blue field that is the big_nav.
Images below:




**CSS:**

.big_div {
margin: auto;
width: 100%;
height: 203px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 14pt;
'background: url("../images/topbg.png") no-repeat;'
background-size: contain; /*Makes the background scaling.*/
}
.nav_div {
background-color: #ff0000;
margin: auto;
width: 100%;
height: 40px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 13pt;
text-align: center;
vertical-align: middle;
}

**HTML:**

<div class="big_div"></div>
<div class="nav_div">
<a id="nav-hjem" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Hjem</a>
<a id="nav-jeg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Jeg</a>
<a id="nav-meg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Meg</a>
<a id="nav-deg" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Deg</a>
<a id="nav-du" href="<?=$HOST?>index.php" class="w3-bar-item w3-button">Du</a>
</div>

 

[NorseMan]

I found the solution my self.

- I had to remove the hight on big_div and change it to min-height.

- Set the position property of .nav_div to absolute, and position it at the bottom of .big_div.
- And I had to remove this line: background-size: contain; /*Makes the background scaling.*

Both .big_div and .nav_div is scaling in proportion to the background image in .big_div, and .nav_div stays at the bottom of .big_div when it scales.

 

[rimsha]

Nice work troubleshooting and coming up with your own CSS fixes! Keep honing those front-end skills - being able to diagnose and solve issues like this will make you a stronger developer.