Autor |
Nachricht |
Rocreex
Threadersteller
Dabei seit: 18.09.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 18.09.2013 21:39
Titel Float mit variabler Containergröße |
|
|
Hallo liebe Community,
ich bin grad vor ein Problem gestoßen, für das ich bisher keine Lösung gefunden habe.
Ich habe auf der linken Seite ein Bild und hätte gerne auf der rechten Seite davon linksbündigen Text, also er soll nicht unter das Bild floaten wenn er länger wird. Dieser Text soll die restliche Breite ausfüllen, hat also keine feste Breite (mit fester Breite funktioniert alles wunderbar).
Folgender Code:
Code: | <div id="bild"><img ...></div>
<div id="text"><p>....</p></div> |
Code: | #bild {
float:left;
width: 100px;
height: 100px;
}
#text {
float: left;
} |
Was passiert ist, dass der Text-Container auf die volle Breite springt und damit unter das Bild floatet. Das war so natürlich nicht gedacht.
Die einzige Lösung die mir spontan einfällt ist, da die Breite des Bildes bekannt ist, dem Text-Container das float wegzunehmen und ihm stattdessen ein Padding zu geben, was mir aber wenig elegant scheint.
Gibt es dafür eine bessere Lösung? Wahrscheinlich ist es ganz simpel, ich komm nur nicht drauf.
Viele Grüße
Rocreex
|
|
|
|
|
fbronko
Dabei seit: 16.02.2011
Ort: Wulfsen
Alter: 43
Geschlecht:
|
Verfasst Do 19.09.2013 07:28
Titel
|
|
|
<p> ist doch ein block-element, dementsprechend volle breite.
ergänz mal dein Stylesheet um
Code: |
#text p { display: inline-block; }
|
Zuletzt bearbeitet von fbronko am Do 19.09.2013 07:28, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Do 19.09.2013 08:11
Titel
|
|
|
Nein nein nein.
Nimm der ID 'text' das float weg und vergib ihm das:
Code: |
#text {
overflow: hidden;
width: auto;
}
|
So zwingst du den Container sich neben dem Bild anzuordnen.
Um einen Außenabstand darzustellen vergibst du dem Bildcontainer ein margin-right.
Zuletzt bearbeitet von SimonDerDude am Do 19.09.2013 08:12, insgesamt 1-mal bearbeitet
|
|
|
|
|
Rocreex
Threadersteller
Dabei seit: 18.09.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 21.09.2013 12:11
Titel
|
|
|
Vielen Dank, das wars!
Laut einem anderen Beitrag, den ich gelesen habe, wird durch das ändern des Overflow-Verhaltens ein sogenannter Block Formatting Context ausgelöst, der den Block dann eigenständig werden lässt und nicht mehr umfließt.
Zuletzt bearbeitet von Rocreex am Sa 21.09.2013 12:12, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Hilfe: div float / width:100% - CSS float Box Model
Freehand - Variabler Strich (Werkzeug)
Aktivierungslink per Mail verschicken und variabler Download
Variabler Header/Footer in Höhe - fester Content - WIE?
variabler Content - Rahmen & Schatten verlängern sich nicht
div und float
|
|