Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
    
Can you post up your html? –  Si 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
add comment

closed as off topic by John Conde Dec 16 '10 at 12:46

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 0 down vote accepted

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.

share|improve this answer
add comment

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