3 divs inside parent div w/o auto resize

I new to webdesign and I wonder how I could do something like this:

..........................
LEFT --- CENTER ---- RIGHT
..........................

Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.

This is how it looks now.

My current HTML:

<div id="container_m">
    <div id="left">
        <p>My name is Barnabas</p>
    </div>
    <div id="right">
        <p>Till salu</p>
    </div>
    <div id="center">
        <p>Senaste nytt</p>
    &l开发者_如何学运维t;/div>
</div>

My currrent CSS:

#container_m
{
    position:absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);

}

#left
{
    position: relative;
    height: 100%;
    width: 33%;
    float: left;
    background-color: blue;


}
#right
{
    position: relative;
    height: 100%;
    width: 33%;
    float: right;
    background-color: green;
}

#center
{
    position: relative;  
    height: 100%;
    width: 33%;
    margin:0 auto;
    background-color: yellow;           
}

Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:

<div style="clear: both;"></div>

This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.

whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:

<div id="parent">
    <div id="left">
        Left Content
    </div>
    <div id="center">
        Center Content
    </div>
    <div id="right">
        Right Content
    </div>
</div>

And then float them all left. :)

You can simplify that hugely: http://www.jsfiddle.net/fsnuh/

HTML:

ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds

<div id="container_m">
    <div class="red">
        <p>My name is Barnabas</p>
    </div>

    <div class="yellow">
        <p>Till salu</p>
    </div>

    <div class="green">
        <p>Senaste nytt</p>
    </div>
</div>​

CSS

Styles for left, right and center combined into one. Overuse of position: relative removed.

#container_m
{
    position: absolute;
    height: 40%;
    width: 60%;
    left: 20%;
    top: 45%;
    background-color:rgba(0,0,0,0.2);
}

#container_m div
{
    height: 100%;
    width: 33.33%;
    float: left;
}

.red
{
    background-color: red;
}
.green
{
    background-color: green;
}

.yellow
{
    background-color: yellow;
}​