CSS Div schiebt sich unter ein anderes

[qhil]

Moin,

wie kann ich verhindern, dass der Text in der dritten Zeile unter das Bild rutscht (siehe Anhang)? Zuerst wollte ich das Div des Bildes auf height: 100% setzen, was aber auch nicht funktioniert hat.

Gibt es da nicht eine Möglichkeit? Danke.

 

[Lawnmower]

da brauchen wir schon ein wenig mehr Infos, lade das mal bitte mal irgendwo als Testcase auf ein Webspace hoch.

 

[faltermayer]

Ich rate einfach mal: z-index?

 

[Reglohln]

Meine Glaskugel sagt, dass es sich dabei wohl um den ganz alltäglichen Fall von Floating handelt, was ja gerade DESWEGEN eingesetzt wird.

Weil du ja keine Infos preis gibst, kann man dir auch nicht wirklich helfen. Rein theoretisch, sollte aber ein padding-left beim Text mit dem Betrag der Breite dieses gelben Etwas das Problem lösen.

 

[qhil]

Wenn ihr noch Infos braucht, sagt es einfach. Nicht immer gleich nörgeln

Ist aber im Prinzip nichts weltbewegendes. Sind einfach nur 2 Divs nebeneinander:

<div style='float: left;'><img src='/pictures/bildchen.png'></div>
<div class='inner_text'>Text Text ... Text</div>

Style von inner_text, auch wenn es irrelevant ist:

div.inner_text{
	font: normal 11px Verdana;
	color: black;
	text-align: justify;
}

Padding zu benutzen wird nicht funktionieren, da die Bilder unter Umständen immer eine andere Breite haben.

 

[Reglohln]

Wenn du floatest, rutscht alles, was länger ist als das Bild, natürlich direkt darunter. Ergo: float weglassen oder padding/margin nutzen. Oder ggf. eine Höhe für das erste Div vergeben.

Zudem ist das Bild in einer sonst leeren div nicht wirklich gut aufgehoben. Du kannst auch Bilder floaten

 

[qhil]

Float weglassen und Padding bringt mir leider nichts. Ich will den Text ja neben dem Bild laufen lassen, allerdings ohne diese Einrückung des Textes - nur weiß ich eben nicht wie

 

[Reglohln]

Es geht aber nur mit Padding, oder 2 Objekte nebeneinander ohne float. Andere Möglichkeiten gibt es wohl nicht.

Was soll das ganze denn werden bzw. wie soll es komplett zum Schluss aussehen? Vllt kann man ja was optimieren und dadurch zu einer Lösung kommen.

 

[qhil]

2 Objekte nebeneinander ohne float.

Wenn du mir sagst, wie ich 2 DIVs ohne float nebeneinander bekomme, dann würde nir das auch schon wieterhelfen. Aber dies scheint ja ohne JS nicht zu funktionieren...

Es soll so wie hier auf CB aussehen:


Da hat man halt links das Bild und daneben den Text ohne dass der verschoben wird. Und hier sind keine Tables im Spiel, wenn ich das richtig gesehen habe. Daher muss es ja irgendwie funktionieren

 

[palace4d]

Du musst das float mit clear:both wieder aufheben. Gibt dein float div eine klasse clearfix.

/* für Firefox, IE8, Opera, Safari, etc. */
.clearfix:before ,.clearfix:after {  
    content: " ";   /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
	clear:both;
}


 
* + html .clearfix { /* für IE7 */
    display: inline-block;
}
 
* html .clearfix { /* für IE6 */
	height: 1%;
}

 

[Reglohln]

Du musst das float mit clear:both wieder aufheben. Gibt dein float div eine klasse clearfix.

Das bringt nur nichts, weil er ja floating verwendet, um den Text neben das Bild zu bekommen. Hebt er dies mittels clear aber nach dem img bzw. der div auf, so steht der text wieder drunter bzw. falsch neben dem Bild.

@qhil:
Auf CB funktioniert das, weil das Bild immer gleich groß ist und man somit padding/margin benutzen kann.

Um zwei Elemente nebeneinander stellen zu können, würde ich hier das img-Tag ohne umgebendes div stellen. Dem img gibst du display: block, width und float: left. Dem div für den Text gibst du ebenfalls eine feste Breite und float: left.

Man könnte es sicher auch so machen, dass das umgebende div für das Bild eine Höhe von 100% bekommt, sofern dein wrapper auch eine maximale Höhe hat.

Das sind aber alles nur Notlösungen. Gäbe es die Möglichkeit, dass die Bilder eine maximale Breite haben? Also sie können zwar unterschiedlich breit sein, aber eine Maximalbreite überschreiben sie nicht. So könnte man mit padding/margin arbeiten und nur das ist wirklich die sauberste Lösung.

 

[palace4d]

http://jsbin.com/eceray/1/edit

...

Das Flexbox Layout Modell wäre eine alternative, falls Browser unter IE10 keine Rolle spielen. Leider muss man dafür momentan zwei Schreibweisen verwenden.

 

[qhil]

Schaut mal bitte hier: http://jsbin.com/eceray/4/edit

Es geht ja scheinbar auch recht simple. Ich versuche mal eben das so umzusetzen. Irgendwas muss ich dann wohl falsch gemacht haben... oder übersehe ich etwas?

 

[Reglohln]

@palace4d:
Auch dabei wird mit padding-left gearbeitet, was der TE aber nicht möchte/kann.

Es geht ja scheinbar auch recht simple.

Das ist das, was ich mit "2 Objekte nebeneinander". Dafür brauchst du aber eine Feste breite für beide Spalten und da deine Bilder keine feste Breite haben, wird das eben nichts. Daher meine Fragen oben bezüglich der Breite deiner Bilder.

 

[qhil]

Stimmt, habe ich auch eben bemerkt.
Ich verstehe nicht, dass so etwas solche Probleme macht. Wenn ich eine Tabelle nehmen würde, dann wäre das kein Thema - aber dann wird man ja direkt "verspottet"

Egal, ich schau mich nach einer Alternative (designtechnisch) um. Danke für die Unterstützung!