Question

Hey guys i’m making a website but for some reason my div tags are being pushed down when they leave the window. For example, here is my navigation.

Then when I make the browser window smaller it does this.

These are the attributes to do with the navigation.

.navigation_container {
margin: 0;
padding: 0;
position: relative;
padding-top: 30px;
}

.navigation {
height: 40px;
color: #FFFFFF;
font-size: 15px;
list-style: none;
}

.link {
height: 10px;
float: left;
position: relative;
margin-top: 15px;
margin-left: 15px;
text-decoration: none;
}

.link_a {
text-decoration: none;
padding: 10px;
}

Also my Html code for those who want it.

                <div class="navigation_container">
                    <div class="navigation">
                        <li class="link"><a class="link_a current" href="">Home</a></li>
                        <li class="link"><a class="link_a" href="">Features</a></li>
                        <li class="link"><a class="link_a" href="">Contact</a></li>
                        <li class="link"><a class="link_a" href="">Link1</a></li>
                        <li class="link"><a class="link_a" href="">Link2</a></li>
                    </div>
                </div>

Any help as to why this is happening would be appreciated.

Thanks.

Answer 1

You posted none of your html, so bit of a shot in the dark here, but specify a min-width to keep them from wrapping.

.navigation_container {
   min-width: somepx;
   margin: 0;
   padding: 0;
   position: relative;
   padding-top: 30px;
}