nicht angemeldet
Probleme mit float
Hallo.
Ich möchte auf meiner Seite vier Textabsätze wie folgt plazieren.
Erster Absatz ist links, zweiter rechts vom ersten. Der dritte unter dem ersten und der vierte neben dem dritten und unter dem zweiten.
Quasi eine Tabelle, nur platzsparender, weil die unteren Absätze nach oben rücken sollen.
Kleine Veranschaulichung:
|1|2|
|3|4|
Mein Code sieht so aus:
#page_content
{width:600px;
border:1px solid red;
}
#page_content .column
{
width: 48%;
vertical-align:top;
margin:0; padding:5px;
float:left;
}
#page_content .columnright
{
margin:0; padding:5px;
width:48%;
float:left;
}
Leider klappt es nicht ganz - die vierte Box erscheint unter der ersten. Das wäre eigentlich nicht weiter schlimm...es kommt leider noch hinzu, dass der Abstand zwischen der ersten und vierten Box viel zu groß ist (etwa so lang wie die Höhe der dritten Box)
Freue mich über jeden Rat.
-
Hallo,
Vorschlag:
|1|2|
|3|4||1| floaten
|2| nimmt den rest neben 1 einclearendes Element
|3| floaten
|4| nimmt den rest neben 3 einZusätzlich margin und padding auf '0' setzen.
Gruß
-
Hallo _zeromancer,
Absätze 2 und 3 gehören jetzt keiner Klasse an, margin und padding sind auf 0 und ein ein zusätzliches Element habe ich auch reingequetscht. Absatz 4 hat immernoch einen riesigen Abstand und steht jetzt unter |1| un |3|, beansprucht also die volle Länge des Containers.
Habe ich dich vielleicht missverstanden? :/
-
Hallo Paul,
nur ein Gedanke:
HTML
**********************<div id="lo"></div>
<div id="ro"></div>
<br id="break" />
<div id="lu"></div>
<div id="ru"></div>CSS
**********************html, body, div {
padding:0;
margin:0;
height:100%;
witdh:100%;
}
#lo {
width:???;
float:left;
}
#break {
clear:left;
}
#lu {
width:???;
float:left;
}Gruß
André-
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>-
hi,
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.
Du willst also etwas wie
--- ---
| 1 | 2 |
| 1 ---|
|---| 4 |
| 3 | 4 |
| 3 | 4 |oder auch
--- ---
| 1 | 2 |
|---| 2 |
| 3 |---|
| 3 | 4 |erreichen?
Dann könntest du die Reihenfolge der Elemente im Quelltext verändern, 1 gefolgt von 3, und dann 2 gefolgt von 4 - und diese beiden Paare dann jeweils noch in einen Container gepackt, und dann werden diese Container per float nebeneinander gebracht ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Genau das will ich haben!
Ich probier' mal deinen Lösungsvorschlag und meld' mich morgen.
Danke euch zwei. -
Whoaaa es geht!
Und immer wenn was funktioniert fragt man sich wieso man selbst auf die Lösung nicht gekommen ist. :)
Danke Jungs!
-
-
-
-
-