Problem positioning these blocks in CSS
Question
I am trying to achieve this->
(Black box is a signup/login section, blue is a nav bar, red is a header area with some
text
content) I am trying to get to that outcome with this css:<body>
<div id ="nwtBox">
<div id ="signupLogin">
<ul>
<li> <a href =''> Sign Up</a>
</li>
<li> <a href =''> Log In</a>
</li>
</ul>
</div>
<div id = "navigation">
<ul class="main-nav">
<li class="main-nav-selected">
<a href="index.php">HOME</a>
</li>
<li>
<a href="stuff.php">STUFF</a>
</li>
<li>
<a href='stuff.php'>STUFF</a>
</li>
</ul>
</div>
<div id ="header">
<h1> TEXT</h1>
</div>
</body>
and this HTML
<body> <div id ="nwtBox"> <div id ="signupLogin"> <ul> <li> <a href =''> Sign Up</a> </li> <li> <a href =''> Log In</a> </li> </ul> </div> <div id = "navigation"> <ul class="main-nav"> <li class="main-nav-selected"> <a href="index.php">HOME</a> </li> <li> <a href="stuff.php">STUFF</a> </li> <li> <a href='stuff.php'>STUFF</a> </li> </ul> </div> <div id ="header"> <h1> TEXT</h1> </div> </body>
instead of the desired outcome, I get:
what's wrong?
3 answers
solution1
0 2011-05-08 04:09:33
Add clear:both to your navigation block
#nwtBox #navigation {
float: left;
padding: 35px 0 0 0;
clear:both;
}
solution2
0 2011-05-08 04:09:53
Floats will not interfere with relatively placed elements; content will just flow around the float. As you have both the navigation and the login box as floats, they're not affecting the positioning of the content div. If you want to leave things simple, you can simply give the content div a top margin equal to loginHeight + loginTopMargin + navHeight + navTopMargin and you'll be OK.
solution3
0 2011-05-08 04:24:25
Try this:
#nwtBox #navigation {
clear: both;
//remove float: left;
padding: 35px 0 0 0;
}
If you want to keep float: left in #navigation, you can add a div with style clear: both into HTML code.
<div id="signupLogin>
...
</div>
<div style="clear: both"></div>
<div id="navigation">
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.