Mobile app version of vmapp.org
Login or Join
Kaufman445

: Make content area appear on the right of the menu_bar 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

@Kaufman445

Posted in: #Css #Html

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.

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Kaufman445

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Karen161

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.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme