✔ Links Bild - Rechts Text(oder auch nicht) mit divs lösen

[udo_the_man]

Guten Abend,

ich versuch mich grad folgendes und komme nicht weiter. Vielleicht habt ihr einen Tipp für mich:
Eine Seite in zwei Spalten aufgeteilt.jeweils links und rechts halt.links soll ein Bild rein und rechts der Text.Soweit ok.Jetzt sollen aber halt auf jede Seite mehrere von diesen "Zweispaltern" untereinander weil halt mehrere Bilder usw.
Habe folgenden Ansatz versucht:

<div id="first">
	    <div class="left">
		    </div>
		        <div class="right">
		    <p>erste Rechts</p>
		    </div>
            </div>
<div id="second">
	    <div class="left">
		 <p>zweite Links</p>
	            </div>
	            <div class="right">
		        <p>zweite Rechts</p>
	            </div>
            </div>

usw...
Soweit ist es ja ok. Nur was muss ich machen, wenn ich jetzt auf einmal in einer "Zeile" Links kein Bild haben möchte oder von mir aus rechts keinen Text?
Weil wenn ich das mit dem normalen Float mache und beides auf: left setzte, dann verschiebt sich ja logischerweise, bei einem fehlenden Bild/Text, das darauffolgende Element an diese Stelle.
Ich könnte das natürlich so lösen, dass ich für jedes Dieser Element ein eigenes Div Tag hätte mit nem eigenen Namen aber versuche das halt eleganter zu lösen, weils ja z.B auf 5 Seiten in denen es vorkommen sollen mit jeweils 3-4 vorkommen pro Seite nur ein/zwei Ausnahmen wären, wo halt kein Bild/Text wäre.

Hoffe ihr habt nen heißen Tipp

 

[ZodiacXP]

Mit "clear" kannst du erzwingen das unter floats weitergemacht wird. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear

<div id="first" style="clear:both">
[...]
<div id="second" style="clear:both">

Meinst sowas?

 

[Maik]

Hi,

du hast die Möglichkeit, das Clearen über eine Klasse zu regeln, wie beispielsweise http://positioniseverything.net/easyclearing.html, die in den "Blöcken" (#first, #second) aufgerufen wird.

mfg Maik

 

[udo_the_man]

Im Grunde genau das was ich suche nur warum fällt dann die zweite Zeile noch eine Zeile tiefer? Also hab ichs jetzt so gemacht:

div.right {
   float:left;
   margin-left:25%;
   margin-top:0;
   width:65%;
}
div.left {
	width: 20%;	
	float: left;
	margin-top:0;
	margin-left: 15px;
}

Jetzt passt im ersten div alles wie es soll....in der "zweiten" Zeile steht auch links das Linke aber das Rechte aus der zweiten Zeile steht rechts...aber in der dritten Zeile. Und es soll ja schon alles was in einem first/second usw. div ist auch in einer Zeile stehen.

 

[ZodiacXP]

Da tipp ich jetz mal stumpf auf "display:inline;"
aber für beide

ansonsten ist sie schlichtweg zu breit.
unter Umständen hilft da overflow:hidden;

 

[Maik]

Das liegt einfach an den margin-left- und width-Deklarationen, die in der Summe mehr als 100% ergeben, und somit die verfügbare Breite des Anzeigebereichs überschreiten.

mfg Maik