Reputation: 5791
I have six links inside a 100% width DIV.
How can I stop my links from stacking on top of each other, moving, down, and disappearing as I shrink the size of my browser? I would like to have them remain inside the horizontal div.
Here is my code:
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
}
.logo {
width: 317px;
height: 84px;
float: left;
background: url('img/lifesign.png');
}
.navlink {
height: 84px;
font-family: 'open_sansbold';
color: #FFF;
text-align: center;
line-height: 84px;
padding-left: 22px;
padding-right: 22px;
float: right;
font-size: 80%
}
<div class="nav">
<a href="contact.htm" class="navlink">CONTACT</a>
<a href="contact.htm" class="navlink">GET INVOLVED</a>
<a href="contact.htm" class="navlink">Q+A</a>
<a href="contact.htm" class="navlink">HOW IT WORKS</a>
<a href="contact.htm" class="navlink">WHO WE ARE</a>
<a class="logo" href="home.htm"></a>
</div>
Upvotes: 2
Views: 291
Reputation: 1062
I think the ideal here would be to create a div of fixed width (id of 'page' below) to contain your nav and other page elements. I also took the liberty of cleaning up some of the structure of the nav itself, as well as some of the more unnecessary rules. I think a list is ideal here. You may want to reverse the order of it since you are floating right but otherwise it works great.
<html>
<head>
<style>
body { text-align: center; }
#container { width: 960px; margin: 0 auto; }
#nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
#nav li { float: right; }
#nav li.logo { float: left; }
#nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
#nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li class="logo"><a href="home.htm"></a></li>
<li><a href="contact.htm">CONTACT</a></li>
<li><a href="contact.htm">GET INVOLVED</a></li>
<li><a href="contact.htm">Q+A</a></li>
<li><a href="contact.htm">HOW IT WORKS</a></li>
<li><a href="contact.htm">WHO WE ARE</a></li>
</ul>
<div id="main">
<!-- page content here -->
</div>
</div>
</body>
</html>
Upvotes: 0
Reputation: 16705
Set a min-width
on your .nav
class.
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
min-width: 960px; /* or whatever width you need */
}
Upvotes: 1