Intelligent liquid columns

by jkneb

HTML

<h3>Block as fixed on right of a floatted element</h3>

<div class="bigDaddy">
    
    <div class="floatL" style='padding:7px'>float:left et ouais<br>lkqsjd qlsjd qlskjd</div>
    
    <div class="containerASColumn">
        <p style='text-align:right; padding:7px;'>table et voilĂ  c'est encore nous blablabl abllksj sdlkj sdlfkjs lkfjsld fjsld fjlsjfsd </p>
    </div>
    
</div>


<h3 style="margin-top:30px">Block as a container of floatted elements</h3>

<div class="containerOfFloatedElements">
    <div class="floatL" style="height:200px">float:left</div>
    <div class="floatL">float:left</div>
    <div class="floatL">float:left</div>
</div>

CSS

.bigDaddy { overflow:hidden; border:1px solid red; width:400px; }

.containerASColumn,
.containerOfFloatedElements{ 
    background:#4D94FF; 
    display:table; 
    zoom:1; 
    vertical-align:top;
}

.floatL {
    float:right; 
    border:2px solid #FFA399;
}

.containerASColumn:after,
.containerOfFloatedElements:after {
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0 !important;
    line-height:0;
    font-size:xx-large;
    content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}