divs are not floating properly - html

Question

i would really appreciate it if anyone could help me out with this.

So, in my page I have two divisions, one is floating to the right and the other is a sidebar which float to the left ... in the phpdesigner when i click on RUN everything seems good and the two divisions are side-by-side, but when i try to run it on any browser the left div is good but the right div is being displayed under the left div, I thoroughly searched for this but didn't find anything.

here's my css and HTML pages:

main page :

    <div id="page">
        <div id="main_sidebar">

        <div class="main_top_sidebar">


        </div>


        <div class="main_body_sidebar">

            <p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT          SOME TEXT </p>

        </div>


        <div class="main_bottom_sidebar"></div>

    </div>


    <div id="main">


        <div class="main_top">
            <h1> Home </h1>

        </div>


        <div class="main_body">

            <p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT       SOME TEXT </p>

        </div>


        <div class="main_bottom"></div>

    </div>

    </div>

CSS sheet :

html, body {
text-align: center;
}
p {text-align: left;}

body {
margin: 0;
padding: 0;
background: #C1C1C1;
background-image:url('background2.png');
text-align: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #F1F5F8;
}
*
{
 margin: 0 auto 0 auto;
 text-align:left;}


html, body {
text-align: center;
}
p {text-align: left;}




#header h1
{
padding-top: 14px;
display:block;
float:left;
line-height:20px;
margin-left:17px;
width:260px;
color:#FFDE00;
text-align:left;
font-size:17px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;

}


#header ul {
padding-left: 100px;
list-style-type: none;
height:21px;
text-align:center;
height:85px;
overflow:hidden;
}
#header ul li , #header ul li a, #header ul li a:visited{
    display:block;
    float:left;
margin: 0px;
text-align:center;
line-height:72px;
width:133px;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
text-decoration:none;
}

#header ul li a:hover{
color:#CCCCCC;
}



#main 
{
margin-top:10px;
margin-bottom:10px;
}


#main .main_top
{
float: right;
height:85px;
width:921px;
background-image:url(main_top.png);
background-repeat:no-repeat;
}

#main .main_body
{

padding-left:0px;
float: right;
height:auto;
width:921px;
background-image:url(main_body.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;

}

#main .main_bottom
{
float: right;
height:8px;
width:921px;
background-image:url(main_bottom.png);
background-repeat:no-repeat;
}

#main .main_top h1
{
font-size:24px;
line-height:85px;
color:#000000;
padding-left:25px;
background-position:right;
background-repeat:no-repeat;
margin-right:25px;
}

#main .main_body p
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

#main .main_body ul li 
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}




#page
{
  margin: 0 auto 0 auto; 
      margin-top:25px;
  display: block; 
  height:auto;
  position: relative; 
  overflow: hidden; 
  width: 1151px;
}

#header
{
background-image:url(header.png);
border-radius:15px;
background-repeat:no-repeat;
width:1151px;
height:134px;
}

#float {

width:1151px;
border-radius:15px;
height:170px;
border-color:#FFDE00;
border-style: solid;
border-width:2px ;
background-color:#404040;
color:#ffffff; 

}

#float ul li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px
}

#footer {
float: right;
display:block;
width: 1151px;
height:74px;
background: url(footer.png) no-repeat;
border-radius: 15px;
text-align:right;
font-size:9px;
line-height:75px;
clear:both;
}

#footer p{
font-size: 12px;
text-align:center;
padding-top: 17px;
}

#footer, #footer a, #footer a:visited{
color:#FFDE00;
}

#footer a:hover{
text-decoration:none;
color:#CCCCCC;
}

#main_sidebar 
{
margin-top:10px;
margin-bottom:10px;

}


#main_sidebar .main_body_sidebar
{

padding-left:0px;
float: left;
height:auto;
width:230px;
background-image:url(main_body_sidebar.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;
clear: left;


}

#main_sidebar .main_bottom_sidebar
{
float: left;
height:8px;
    width:230px;
background-image:url(main_bottom_sidebar.png);
background-repeat:no-repeat;
clear: left;
}

#main_sidebar .main_top_sidebar
{
float: left;
    height:85px;
    width:230px;
background-image:url(main_top_sidebar.png);
background-repeat:no-repeat;
clear: left;
}

    #main_sidebar .main_top_sidebar h1
{
font-size:24px;
line-height:85px;
    color:#000000;
padding-left:25px;
background-position:left;
background-repeat:no-repeat;
margin-right:25px;
}

#main_sidebar .main_body_sidebar p
{

line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

#main_sidebar .main_body_sidebar ul li 
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

Answer 1

There are two things I'd like to point out.

1. Put your floating into your markup since looking back at your css to find out what is/is not floated is annoying and will likely lead to unintended consequences
2. Make sure to add a clear element as the last sibling of any floated elements and this will address float bugs in IE

EXAMPLE:

CSS:

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

HTML

<div class="fl">
  <!-- Contents of first floated item here -->
<div>
<div class="fl">
  <!-- Contents of second floated item here -->
<div>
<div class="clear">
  <!-- Leave this empty -->
</div>

Answer 2

#main {
    float :right;
    width: 70%;
}

#main_sidebar {
    float: left;
    width: 30%;
}

What you're experiencing is known as float drop, due to either undefined column widths or not accounting for margin/padding/border. The above code will take care of the column layout, and then be sure not to add any left/right margin, padding, or border to the two columns -- add it to the elements inside instead.

Answer 3

Add float:left; to #main_sidebar otherwise like any block element it will take whatever width that's available