mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 08:56 Benutzername: Passwort: Auto-Login

Thema: Float mit variabler Containergröße vom 18.09.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Float mit variabler Containergröße
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

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
fbronko

Dabei seit: 16.02.2011
Ort: Wulfsen
Alter: 43
Geschlecht: Männlich
Verfasst Do 19.09.2013 07:28
Titel

Antworten mit Zitat Zum Seitenanfang

<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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Do 19.09.2013 08:11
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Rocreex
Threadersteller

Dabei seit: 18.09.2013
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 21.09.2013 12:11
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank, das wars! Lächel
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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.