Heutiger Mittagstisch: Div-Suppe

[andi]

Mahlzeit,
ich koch gerade ne leckere Div-Suppe und frag mich, ob ich mir statdessen nicht was Herzhafteres einverleiben sollte.

Also das Layout sieht vor (ähnlich wie in Blogs), verschiedene Einträge untereinander, getrennt durch eine schmale Linie darzustellen. Jeder Bloxk ist zweigeteilt. Links Text und rechts ein Bild - oder genau andersrum.

Meine Zutaten:
1 DIV für den Block
1 DIV "content_links" (float:left, widht:450)
1 DIV "pic_links" (float:left, width:300)
1 DIV spacer als Abstandshalter für die Blöcke (border-bottom: solid ...)

Irgendwie ist mir da zuviel. Vor allem der Spacer. Wenn ich aber um den Block selbst Abstände und ne Border zeichnen lasse, geht die Linie teilw. durch das Bild durch. Sprich, die Höhe des Blocks stimmt nicht mit der Höhe des Inhalts überein. Warum nicht??

Danke

[bleicher]

Grüße,
den text pappst du sowieso brav in p, deren margin ersetz pic-div
spacer-div? margin ist wieder zu uncool?
1 div pro eintrag ist IMHO genug
MFG
bleicher

[Andi]

1 div pro eintrag ist IMHO genug

Was ich vergessen hatte: Der Text hat noch ne Überschrift. Somit muss Überschrift und Text in ein Div, um es richtig floaten zu lassen, oder?

Mein Markup:

  
	<div class="block">  
            <div class="infoleft">  
                <h1>02. Juni</h1>  
                <p>blablabla</p>  
            </div>  
  
            <img src="/images/content/bild.png" alt="bbb" />  
  
        </div>  
  

  
.block{  
	  
	border:solid 1px #9eb3df;  
	margin:40px 0;  
	padding-top:60px;  
}  
  
.infoleft{  
	width:400px;  
	padding-right:10px;  
	float:left;  
}  
  

Problem: Die Höhe vom Block ist nur so hoch wie das Bild, nicht wie der Text-Inhalt (bzw. je nachdem was höher ist)

[molily]

Problem: Die Höhe vom Block ist nur so hoch wie das Bild, nicht wie der Text-Inhalt (bzw. je nachdem was höher ist)

Siehe
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen
http://molily.de/weblog/css-floats-einschliessen

Mathias

[andi]

Vielen Dank!

[bleicher]

Grüße,
nimm float da raus, gefloatet wird das bild, nicht der text.
bin im moment niczht im zustand dir was zu basteln, aber mach es nicht so kompliziert, ist nicht für Mac - geht auch ohne strassteine am condom.
MFG
bleicher

[Cheatah]

Hi,

ich koch gerade ne leckere Div-Suppe und frag mich, ob ich mir statdessen nicht was Herzhafteres einverleiben sollte.

wahrscheinlich benötigst Du lediglich die richtige Programmiersprache.

Sprich, die Höhe des Blocks stimmt nicht mit der Höhe des Inhalts überein. Warum nicht??

Weil die Inhalte gefloatet sind (eines der _Zwecke_ dessen es ist, Elemente aus ihren Eltern potenziell herausragen zu lassen) und das Elternelement weder selbst gefloatet ist, noch über einen günstigen Wert der overflow-Eigenschaft genötigt ist, gefloatete Inhalte zu umfassen.

Cheatah

[Gunnar Bittersmann]

@@andi:

nuqneH

ALA: CSS Floats 101, s.a. meinen Kommentar Avoid floats if you can

Qapla'