Div-Formatierungs-Probleme

Heyho liebe Leute,

ich muss für die Uni eine Homepage basteln und dazu muss ich nen bisl mit Div rumbasteln...

Allerdings verwirrt mich dieses Float-Gedönse vollkommen.

Ich brauche folgende Formation

--------Div......#.......Div--------
--------..........#...........--------
--------Div.....DIV.....Div--------
--------..........#...........--------
--------Div......#.......Div--------

links oben, rechts oben, links unten und rechts unten haben fest höhen und breiten

links mitte rechts ham feste breite und die höhe soll sich dem text anpassen

(mitte ist immer so hoch wie alle links bzw rechts zusammen)

die breite ist bei links und rechts fest

die mitte soll die breite zwischen links und rechts füllen (zur not wird die halt auch fest gemacht)

die striche solln den hintergrund darstellen

mit dem Float gedönse komme ich immer nur aufs Divs nebeneinander

und mit clear:both und dann wieder Float krieg ich mit der mitte probleme

bitte um Hilfe.

PS: Kann mir auch mal einer erklären warum man heut zu tage keine Tables mehr zum formatieren benutzen darf? =(

Lieben Gruß

Der Gummix

So in etwa soll das dann aussehn, die ecken haben halt feste größen und die mittleren div-boxen sollen sich von der höhe an den Context in der Mitte anpassen.

Das dumme is nur, dass mein Prof mich durchrasseln lässt, wenn ich das mit tabellen löse (rowspan und all meine Probleme wären wech )

Gruß

Gummix

by threadi

<style type="text/css">
.clearafter:after {
 clear: both;
 content: ".";
 display: block;
 float: none;
 font-size: 1px;
 height: 1px;
 visibility: hidden;
}
<div style="float: left;background-color: red;">
    <div style="width: 30px;height: 30px;background-color: green;">lo</div>
    <div style="width: 30px;height: 30px;background-color: blue;">lm</div>
    <div style="width: 30px;height: 30px;background-color: pink;">lu</div>
</div>
<div style="float: right; background-color: green;">
    <div style="width: 30px;height: 30px;background-color: green;">ro</div>
    <div style="width: 30px;height: 30px;background-color: purple;">rm</div>
    <div style="width: 30px;height: 30px;background-color: magenta;">ru</div>
</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>

Ich stand einfach so dermaßen auf dem Schlauch, dass ich nich drauf gekommen bin um die linken und rechten divs ne "formatierungs-Div" zu machen T_T

Naja hat man mir wohl ins Hirn geschissen

vielen Dank trotzdem