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.
