CODEWITHSUNDEEP
csshtml
DarkLightA
DarkLightA

Reputation: 15652

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

Upvotes: 2

Views: 124

Answers (6)

thirtydot
thirtydot

Reputation: 228152

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>

Upvotes: 1

Anonymous
Anonymous

Reputation:

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.

Upvotes: 1

Orbling
Orbling

Reputation: 20602

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;" />

Upvotes: 3

Ken Redler
Ken Redler

Reputation: 23943

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/

Upvotes: 3

David Thomas
David Thomas

Reputation: 253308

Simply add clear: both; to the css for #bodystuff.

JS Fiddle demo.

Upvotes: 4

mVChr
mVChr

Reputation: 50177

Just add clear:both to the CSS of #bodystuff to clear the floats.

Upvotes: 2

Related Questions