CSS positioning divs

I'm always weak when it comes to positioning divs, but this situation is slightly difficult to find a solution to online. I'm trying to position boxes like so:

 _  ___  _ 
|_||   ||_|
 _ |   |
|_||___|

Is there a way to avoid defining each one's pixel positions specifically and make them slo开发者_开发百科t into the three columns I've got?

Define three containers for each column, and float them to the left:

<div style="float:left;width:Xpx"></div>
<div style="float:left;width:Ypx"></div>
<div style="float:left;width:Zpx"></div>

Now you can put all your containers in appropriate places in this columns.

take a look at this fiddle: http://jsfiddle.net/rREAh/ is this what you are looking for?

If you need a perfect layout, take a look at the yahoo layout manager: http://developer.yahoo.com/yui/layout/

See: http://jsfiddle.net/qXwKT/

CSS:

.box {
    background: #ffffff;
    padding: 5px;
    border: 1px solid #b3b3b3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#container {
    margin: 0 auto;
    width: 400px;
    background: #ccc;
    overflow: hidden
}
#left, #right {
    float: left;
    width: 75px;
}
#mid {
    float: left;
    width: 250px;
}
#mid .box {
    margin: 0 10px;
    border-color: red
}
#left .box {
    margin: 0 0 10px 0;
    border-color: blue
}

HTML:

<div id="container">
    <div id="left">
        <div class="box">left 1</div>
        <div class="box">left 2</div>
    </div>
    <div id="mid"><div class="box">mid</div></div>
    <div id="right"><div class="box">right</div></div>
</div>

Also take a look at this one: jsfiddle example which has a fluid layout.

And another one without the fixed div in the bottomleft corner.