2 column CSS one next to another

Question

I have this HTML script:

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
    <div id="container">

        <div id="messages" class="span_9_of_12 element">
            <div class="msg_cont">
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
            </div>

        <div id="sidebar" class="span_3_of_12 element" style="float:right;">
            <div class="sidebar_cont">
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
            </div>
        </div>
    </div>
</div>

And this CSS code:

*{
    margin: 0px;
    padding: 0px;
}
body {
    background: white;
    font-size:13px;
    color: #4f5f6f;
    display: block;
}

div{
    display:block;
}

#header{
    width: 100%;
    height: 50px;
    background-color: black;
    color: #FFF;
    position:fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid #475564;
}

#container{
    border-bottom: 0;
    width: 100%;
    margin: 0 auto;
    max-width: 920px;
    overflow: hidden;
}

.element{
    position:relative;
    float:left;
}

/*  GRID OF TWELVE   ============================================================================= */

.span_9_of_12 {
    width: 74.6%;
}

.span_3_of_12 {
    width: 23.8%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_9_of_12 {
        width: 100%; 
    }
    .span_3_of_12 {
        width: 100%;
    }
}

.msg_cont {
    padding: 0 20px 10px 10px;
}

.msg{
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: black;
    color: white;
    border-radius: 3px;
    overflow: auto;
}

.sidebar_cont{
    padding: 0 10px 10px 0;
}

.sidebar_el{
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: black;
    color: white;
    border-radius: 3px;
    overflow: auto;
}

#top_position{
    width: 100%;
    height: 80px;
}

What I need to do is to make #messages the left column and #sidebar the right column. I tried many solutions like float, display: block, etc but I can't get this working.

I need to keep the HTML as it is. Anyone have any idea about what I can do to get this working?

JSFiddle - You can find here my script. I only need to do the "hi again!" divs' parent to stay on the right of "Hi!" divs' parent (#messages next to #sidebar) as long as the screen width is larger than 480px.

Answer 1

The problem seems to be that #messages is a parent of #sidbear

You just need to make a small adjustment to the HTML like so

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
<div id="container">
<div id="messages" class="span_9_of_12 element">
    <div class="msg_cont">
        <div class="msg">
            <p>Hi!</p>
        </div>
        <div class="msg">
            <p>Hi!</p>
        </div>
        <div class="msg">
            <p>Hi!</p>
        </div>
    </div>
</div>
<div id="sidebar" class="span_3_of_12 element" style="float:right;">
    <div class="sidebar_cont">
        <div class="sidebar_el">
            <p>Hi again!</p>
        </div>
        <div class="sidebar_el">
            <p>Hi again!</p>
        </div>
    </div>
</div>
</div>

See this updated fiddle

Answer 2

<div class="leftsidebar">
PUT YOUR CONTENT HERE         
  </div>

  <div class="content"> 
  </div>

CSS

.leftsidebar {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
display: block;
}


.content {
padding: 15px;
width: 640px;
float: left;
   }

.container {
width: 1000px;
background-color: #EADCAE;
margin: 0 auto;
}

Answer 3

As per i got you..you need this..check this code..

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
    <div id="container">

        <div id="messages" class="span_9_of_12 element">
            <div class="msg_cont">
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
            </div>

        <div id="sidebar" class="span_3_of_12 element" style="float:none;padding-left:10px;">
            <div class="sidebar_cont">
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
            </div>
        </div>
    </div>
</div>

and if i am wrong then tell me..i wiil try to help..:)