Div Container von text umfließen lassen?
mathis
- css
Hallo,
Ich möchte das Layout meiner Website mit CSS gestalten, ich habe ingesamt 4 div-container, 2 zeigen außen jeweils ein Bild an und in einem dritten befindet sich der Inhalt zwischen den beiden äußeren Containern. Im vierten Container befindet sich die Steuerung, der vierte Container ist im Inhalt Container rechts positioniert.
Mein problem ist jetzt, dass der Steuerungscontainer immer weiter nach unten rutscht, wenn ich inhalt einfüge.
Quelltext:
HTML:
<div id="bild">
<img src="fernsehturm-01.jpg" alt="Fernsehturm">
</div>
<div id="bild2">
<img src="fernsehturm-01.jpg" alt="Fernsehturm">
</div>
<div id="inhalte">
<center><img src="kopf.jpg" alt="kopf" border=1></center>
<div id="navi">
<ul>
<li>Startseite</li>
<li>News</li>
<li>Über Uns</li>
<li>Extras</li>
<li>Impressum</li><br><p><br><p><br><p><br><p><br><p>
</ul>
</div>
</div>
CSS:
#navi {
width: 120px;
margin-top:50px;
float:right;
padding-right:15px;
text-align:center;
}
#navi ul {
list-style:none;
border:solid;
text-align:center;
}
#inhalte {
border:2px;
border-style: ridge;
margin-top:0px;
margin-left:253px;
text-align:center;
width: 600px;
height: 724px;
}
#bild
{
float:left;
width:252px;
height:724px;
}
#bild2
{
float:right;
width:252px;
height:724px;
}
hi mathis,
der nav container rutscht ja wohl nur dann nach unten, wenn du den inhalt davor (also vor dem float!!) einfügst ;-)
<div id="bild">
<img src="fernsehturm-01.jpg" alt="Fernsehturm">
</div>
<div id="bild2">
<img src="fernsehturm-01.jpg" alt="Fernsehturm">
</div>
<div id="inhalte">
<center><img src="kopf.jpg" alt="kopf" border=1></center>
<div id="navi">
<ul>
<li>Startseite</li>
<li>News</li>
<li>Über Uns</li>
<li>Extras</li>
<li>Impressum</li><br><p><br><p><br><p><br><p><br><p>
</ul>
</div>
nach dem 'float: right' eingefügter inhalt/content sollte(wird) sich wie gewünscht verhalten und den navcontainer an seinem platz lassen
</div>
cu