Spalten-Layout, float boxen
Ralph
- css
0 Ralph
Ich habe Seite mit 3 Spalten in CSS gebaut, mit einer <div> Box in der Mittleren Spalte. Inhalt: Ein Textblock oben und dann viele Bilder. Soweit funktioniert alles. In die Bilder sollen sich Textbausteine einfügen, um die die Bilder drum rum floaten Das klappt nicht.
Idee war, das innerhalb der großen Div Box mit relativ plazierten <span> Boxen zu machen, welche mit float:left oder right den restlichen Bilderinhalt um sich herum fließen lassen. Hab ersatzweise mal die Bilder durch viel Text ersetzt.
Ergebnis:
Die erste Box wird sauber umflossen, allerdings mit einem Abstand als hätte ich margin:100 gesetzt. Margin oder padding der Box bzw. padding der div Box auf 0 setzen bringt nichts.
Die beiden weiteren span Boxen werden nicht umflossen. (Mit clear:both wird das nix, das zerschiesst mir das Layout des Restes der Seite, ich lande unterhalb der Navigations div Box links bzw. rechts.)
was tun?
<div style="text-align:center; margin: 0 120px 0 120px">
<div style="color:red; float:left; position:relative; left:10px;
top:20px; text-align:left; margin:0; padding:0; border:1px solid blue">
1.Textbeispiel<br> Text Text Text
</div>
<span style="color:red; float:left; position:relative; left:10px; top:320px; text-align:left; margin:0; padding:0; border:1px solid blue">
2.Textbeispiel<br> Text Text Text<
</span>
<span style="color:red; float:right; position:relative; right:10px; top:220px; align:left; margin:0; padding:0; border:1px solid blue">
3.Textbeispiel0<br> Text Text Text
</span>
Text-Platzhalter, hier sollen mal Bilder rein, dieser Inhalt soll um die o.a. spans rumfliessen (wird noch sehr viel mehr Text bzw. inhalt..
</div>
So, das mit dem position relative war irgendie Blödsinn. Ich habe die Position Angabe einfach weg gelassen und die Boxen da in den Kontext gepackt, wo sie etwa hingehören, dann klappt das mit dem umfließen und der Positionierung ganz gut.
Einziges Problem was bleibt: Dadurch daß der Inhalt wiederum 100 pixel große Bilder sind und alle 10 oder so Bilder die Box mit dem Text steht, bricht der IE je nach Fensterbreit so um, daß auch mal nur ein Bild in einer Zeile steht, das genau wollte ich vermeiden..