CODEWITHSUNDEEP
htmlcss
Duncan Palmer
Duncan Palmer

Reputation: 2913

divs being pushed down

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.

enter image description here

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

enter image description here

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.

Upvotes: 0

Views: 926

Answers (2)

Jay D.
Jay D.

Reputation: 672

I would suggest not using divs for your nav bar, but to use horizontal lists. Less html, cleaner code.

Here is a example: http://css.maxdesign.com.au/listutorial/horizontal_master.htm

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

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;
}

Upvotes: 2

Related Questions