What's wrong with this HTML code?
I want the body part to be underneath the menu, but instead the menu is merged with the body.
http://jsfiddle.net/aqFGD/
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style type="text/css">
body
{
background-color: #369;
}
li.changeMe
{
background-color: #DEE;
color: #369;
font-weight: bold;
padding: 8px 16px;
margin: 5px;
display: inline;
}
#bodystuff
{
background-color: White;
display: block;
padding: 15px 10px;
}
</style>
</head>
<body>
<div style="margin: 15px 10px 0;">
<div style="font-size: 30pt; font-weight: bold; color: White; font-family: Arial;">My Website</div>
<div style="float: right; display: block; margin: 0 0 25px 开发者_StackOverflow社区0"><ul style="list-style-type: none; "><li class="changeMe">Hi</li><li class="changeMe">Hello</li></ul></div>
<div id="bodystuff">Hi this is the body</div>
</div>
</body>
</html>
Simply add clear: both; to the css for #bodystuff.
JS Fiddle demo.
You need to clear between your menu and body. For example:
<!--- menu stuff --->
<div style="clear: both;"></div>
<!--- body stuff --->
Your example so modified: http://jsfiddle.net/redler/aqFGD/3/
You have a float above the "body" part, and you are not clearing before new content.
Floating elements have to be cleared, ie. stop floating stuff and start a new.
http://jsfiddle.net/aqFGD/1/
See the modifications in the updated demo.
<br style="clear: both;" />
Just add clear:both to the CSS of #bodystuff to clear the floats.
If you're intending to do anything more than just play around with this, you should use my updated code.
I improved many things - I can explain what and why, if you would like.
I assumed that you wanted the menu buttons to touch the top of #bodystuff, which as far as I can see, none of the other posted answers do without further changes.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Hi</title>
<style type="text/css">
body {
background-color: #369;
font-family: Arial, sans-serif;
}
#container {
margin: 15px 10px 0;
}
#header {
font-size: 30pt;
color: #fff;
margin: 0;
padding: 0;
font-weight: bold
}
#bodystuff {
background-color: #fff;
clear: both;
padding: 15px 10px
}
#menu {
float: right
}
#menu ul {
list-style-type: none
}
#menu li {
background-color: #dee;
color: #369;
font-weight: bold;
float: right;
margin: 0 5px;
}
#menu a {
display: block;
padding: 8px 16px;
}
</style>
</head>
<body>
<div id="container">
<h1 id="header">My Website</h1>
<div id="menu">
<ul>
<li><a href="#">Hi</a></li>
<li><a href="#">Hello</a></li>
</ul>
</div>
<div id="bodystuff">
Hi this is the body
</div>
</div>
</body>
</html>
I think you're missing the position:absolute in the div that needs to float. Otherwise it will be inline.
EDIT: Sorry, I misread the question.
加载中,请稍侯......
精彩评论