inline-block white-space in html lame fix / 3 Column Layout Test /

by asdf

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">             
            <div id="col1">
            sgdfgdfgdfgd fg sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd 
            </div>
            <div id="col2">
            sgdfgdfgdfgd gh sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd  sgdfgdfgdfgd gh sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd 
            </div>
            <div id="col3">
            sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd ksjhdgf sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd fhg sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgdsgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd sgdfgdfgdfgd 
            </div>
        </div>
    </div>
</div>

CSS

#container3{
    background:yellow;
    overflow:hidden;
    width:100%;
}
#container2{
    background:red;
    position:relative;
    left:20%;
}
#container1{
    background:green;
    position:relative;
    left:20%;
    /* white-space: nowrap; */
    font-size:0;
}
#col1, #col2, #col3{
    display:inline-block;
    /* float:left; */
    /* white-space: normal; */
    font-size:16px;
}
#col1{
    width:20%;
    position:relative;
    left:-40%;
}
#col2{
    width:20%;
    position:relative;
    left:-40%;
}
#col3{
    width:60%;
    position: relative;
    left: -40%;
}