A lot of designs we have to turn into HTML these days have multi column elements. These are created because either the copy text might get too long to be readable in a fully expanded browser or the designer wants to ensure that as many as possible page elements are "above the fold".
Although both reasons are worthy to be discussed, we have to live with these tasks.
Normally these problems can be easily solved with an HTML table, and if you can use them and you have to ensure that also older browsers need to display the columns, do so.
With accessible web sites though, you need to make sure that you don't nest tables, and that is where CSS column displays become a necessity.
The only problem is that to date, all multi column layouts in CSS are a hack only, as CSS was not meant to cater for these.
CSS3 comes with a working draft1 for multi column layouts, but until browsers will support these, HTML itself might be obsolete.
So when using any of these techniques below, please be aware of the following:
#inline1{
border:1px solid black;
position:relative;
background:#ccf;
height:2em;
}
.absembed {
width:25%;
position:absolute;
}
#embed2{
top:0px;
left:25%;
background:#fcc;
}
#embed3{
top:0px;
left:50%;
background:#ffc;
}
#embed4{
top:0px;
right:0px;
background:#cff;
}
<div id="inline1">
<div id="embed1" class="absembed">embed1</div>
<div id="embed2" class="absembed">embed2</div>
<div id="embed3" class="absembed">embed3</div>
<div id="embed4" class="absembed">embed4</div>
</div>
#inline2{
float:none;
clear:both;
background:#ccf;
}
.clear{
height:1px;
font-size:1px;
float:none;
clear:both;
}
.embed{
width:25%;
float:left;
}
<div id="inline2">
<div class="embed" style="background:#cff">embed1</div>
<div class="embed" style="background:#ffc">embed2</div>
<div class="embed" style="background:#fcf">embed2</div>
<div class="embed" style="background:#fcc">embed2</div>
<div class="clear"> </div>
</div>
#inline3{
background:#ccf;
position:relative;
}
#embed5{
width:25%;
position:absolute;
top:0px;
right:75%;
background:#ccc;
}
#embed6{
position:relative;
margin:0 50% 0 25%;
background:#fcc;
}
#embed7{
width:25%;
position:absolute;
top:0px;
right:25%;
background:#ffc;
}
#embed8{
width:25%;
position:absolute;
top:0px;
right:0px;
background:#cff;
}
<div id="inline3">
<div id="embed5">embed5</div>
<div id="embed6">embed6 embed6 embed6 embed6 embed6 embed6 embed6 embed6 embed6 embed6 </div>
<div id="embed7">embed7</div>
<div id="embed8">embed8</div>
</div>