0

This is my css code, i would like to make the content_area come to the right of the menu_bar, at the moment it comes at the bottom of the menu_bar

body{
    color:#000000;
    font-family: arial, san serif;
    }

#container {
margin-left: 10%;
margin-right: 10%;
border: 1px solid #46A5E0;
width: 80%;
}

#header {
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 0.5%;
margin-bottom: 1%;
border: 1px solid #46A5E0;
width: 99%;
height: 10%;
}

#pathway{
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 0.5%;
margin-bottom: 1%;
border: 1px solid #46A5E0;
width: 99%;
height: 3.5%;
}

#menu_bar{
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 0.5%;
margin-bottom: 1%;
border: 1px solid #46A5E0;
width: 20%;
height: 40%;
}

#content_area{
margin-left: 25%;
margin-right: 0.5%;
margin-top: 0.5%;
margin-bottom: 1%;
border: 1px solid #46A5E0;
width: 20%;
height: 40%;
}

#footer
{ margin-left: 0.5%; margin-right: 0.5%; margin-top: 0.5%; margin-bottom: 1%; border: 1px solid #46A5E0; width: 99%; height: 3.5%;
}

This is the HTML

<html>

    <head>
        <title> This is my first page </title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="styles/toast.css" type="text/css" />
    </head>

<body>
    <div id="container">
        <div id="header">
            <p class="banner"> This is my header </p>
        </div> <!-- this is the end of the banner area -->

        <div id="pathway">
            My pathway goes here
        </div> <!-- this is the end of the pathway -->  

        <div id="menu_bar">
            <div class="menu">

            </div
        </div> <!-- end of menu bar -->

        <div id="content_area">

        </div> <!-- this is the end of the content_area-->

    <div id="footer">
            this is my footer
        </div>
    </div> <!-- this is the end of the container -->
</body>

This is making the content_area go below the menu_bar how do i bring it to the right of the menu bar.

  • Can you post up your html? – S Philp Dec 16 '10 at 12:36
  • As per the FAQ design question belong on [Doctype](http:/doctype.com) – John Conde Dec 16 '10 at 12:47
  • Doctype isn't a Stack Exchange site, though. IMO it should have stayed on Stack Overflow (there are 22,000 CSS questions there) but it's also fine here. – DisgruntledGoat Dec 16 '10 at 16:15
0

Despite you set proper widths, I think you are using block elements for #content_area and #menu_bar and probably also using block elments inside them.

Block elements has to main characteristics. 1 - Fill 100% width when they can 2 - Adds automntically a line break before and after them.

This leads to some options to deal with this behavior.

First, set proper widths. Second, positioning they with float or position. Also, make sure inner block elements doesn't go 100% width.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.