Paul: Probleme mit float

Beitrag lesen

Hallo André

danke für die Codesnippets. Ich habe damit ein bisschen experimentiert und mal mit Text befüllt, um mein Problem zu verdeutlichen. Der Abstand zwischen ru und ro ist auch hier zu groß, weil sich ru wohl (ob gefloatet oder nicht) nach der Höhe von lu richtet. Wenn sich die untere Box nach der oberen richten würde (also wenn der obere Text zu Ende ist, soll sofort der Text der unteren angezeigt werden. ru würde dann auch einen Teil von lo umfliessen) würde das mein Problem lösen.

<html>
<head>
<style type="text/css">

html, body, div {
  padding:0;
  margin:0;
/*  height:100%;*/
  witdh:100%;
}
#page_content {
  width:570px;
}
#lo {
  width:280px;
  float:left;
}
#break {
  clear:left;
}
#lu {
  width:280px;
  float:left;
}
</style>
</head>
<body>
<div id="page_content">
<div id="lo">
          <p><b>Eins </b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam convallis eros eu tellus. Etiam justo erat, eleifend at, viverra auctor, faucibus at, tortor. Sed nulla. Quisque commodo eros non sapien. Proin viverra, orci volutpat viverra cursus, quam nunc aliquet massa, ultricies sodales augue neque vel quam. Proin vestibulum. Nunc tortor. Etiam rutrum volutpat arcu. Nam mi.</p>
</div>
<div id="ro">
<p><b>Zwei </b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut tortor risus, lobortis non, porta in, dictum non, lectus. Sed est mauris, feugiat quis, porttitor ornare, elementum ut, est. Integer lacinia mi non urna. Duis est pede, pulvinar vitae, tempor ac, vulputate non, lectus. Donec vel orci quis massa.</p>

</div>
<br id="break" />
<div id="lu">
<p><b>Drei </b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vehicula tempus nibh. Donec et magna id ipsum euismod convallis. Etiam quis mauris sit amet lectus faucibus porttitor. Ut gravida risus sit amet nunc. Nunc suscipit tristique quam. Pellentesque neque magna.</p>

</div>
<div id="ru">
<p><b>Und die vier </b>Donec facilisis ullamcorper ipsum. Aenean augue dui, cursus ut, pretium ut, tempus id, dolor. Donec diam nunc, egestas mollis, vehicula ac, laoreet ac, justo. Suspendisse nunc. Aliquam cursus feugiat odio./p>

</div>

</div>
</body>
</html>