Here is the HTML code snippet I am working with:
<div id="main_content">
<div id="left_side>
<h1> MY BIG HEADER </h1>
</div>
<div id="content_area">
SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE
SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE
SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE SOME CONTENT HERE
</div>
</div>
And here is the CSS code for styling it:
#main_content
{
width:960px;
margin: 20px auto 0;
overflow:hidden;
}
#left_side
{
float:left
}
#content_area
{
float:right
}
My issue is that when the content_area div has a lot of text, it ends up going below the left_side, which is not the desired layout. I want the left side to always stay on the left of the content area. The current behavior seen in this image is not what I want
Instead, I would like the layout to look like this:
What am I missing in my code in order to achieve this desired layout?