Home/ Questions/Q 3786910
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T11:45:25+00:00

I want the body part to be underneath the menu, but instead the menu

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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