Question

For some weird reasons I can’t get this to work properly (for a 3 Column layout)they are showing as if they are on different lines.
——————-CSS—————–

.left_content{
    float:left;
    position:relative;
    width:30%;
    padding:10px;
    margin-right:0px;
    margin-left:0px;
    border-style:solid;
    border-width:2px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   



}


.center_content{
    float:left;
    position:relative;
    width:40%;
    padding:10px;
    margin-left:10%;
    border-style:solid;
    border-width:0px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   

}
.right_content{
    float:right;
    position:relative;
    width:20%;
    padding:10px;
    border-style:solid;
    border-width:0px;
    background-image: url(../images/right_divider.gif);
    background-repeat: no-repeat;
    background-position: left bottom;   

}
---------------html--------------
<div class="left_content">
    Nav Left
    </div>


    <div class="center_content">
    main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>main Con<br>
    </div>


<div class="right_content">
    right Con
    </div>

Answer 1

@frank; as you see in your code that the total width of three div's is more then 100%. Reason because padding & border are add width to the div. So, you can use css3 box-sizing property for this. it’s stop padding to add width to the div.

css:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

check this example http://jsfiddle.net/wVfeG/

NOTE: IE7 did not support box-sizing property. So, you can remove padding from your div & give margin to it's child.