CSS 3-Spalten layout: Probleme mit Float bzw. clear

Beitrag von **Synonym** » 07.10.2009, 11:09

Hallo zusammen,

gestern gab es ja schon einen Thread zu dem Thema, aber mein Problem trifft das leider nicht.

Derzeit verwende ich eigentlich das Grundgerüst von https://de.selfhtml.org/css/layouts/meh ... #kopf_fuss

Soweit funktioniert das auch mit nur einer Ausnahme.

Im mittleren Bereich (Content) gibt es teilweise kleine Container die floaten (z.B. Bilder mit Text). Das funktioniert auch noch. Innerhalb dieser kleinen Boxen, unterhalb des Bilder soll jedoch eine extra Zeile Text stehen. Damit die extra Zeile nicht eventuell durch das Float neben das Bild rutsch verwende ich daher ein clear:left. Soweit so gut. Aber das ist genau das Problem das sich nur schwer erklären lässt.

Sobald in der mittleren Spalte ein "clear" kommt (egal welches), dann wird das zwar durchgeführt, aber der weitere Inhalt erscheint dann erst genau auf Höhe vom Ende der linken Spalte, aber dennoch in der Mitte. Also so in etwa als ob da ein padding-top:400px vorhanden wäre, ist es aber nicht.

Danach ist dann alles normal. Diese Problem mit dem Clear gibt es nur im Bereich zwischen Anfang und Ende der linken Spalte.

So, viel geschrieben und doch nicht viel gesagt

Hat einer einen Tipp? Nach 3 Tagen hin und her weiß ich nun echt nicht mehr weiter.

von **Anzeige von ABAKUS** »

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Beitrag von **mgutt** » 07.10.2009, 11:10

Da kann man nur helfen, wenn Du den Code auf das Minimum komprimierst und hier zum Anschauen / selber testen bereitstellst.

Beitrag von **Lord Lommel** » 07.10.2009, 11:24

Hast du vielleicht das Doctype vergessen ?

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **Synonym** » 07.10.2009, 11:25

Hi,
also den ganzen Code mal in Kurzfassung mache ich gerade fertig. Doctype ist vorhanden.

Beitrag von **turgay** » 07.10.2009, 11:30

Versuch mal ein

Code: Alles auswählen

overflow&#58; hidden

einzubauen.

Hat schon so manch verzwickte float-Konstruktion gerettet.

Beitrag von **mano_negra** » 07.10.2009, 11:40

deshalb liebe ich tabellen

Beitrag von **Synonym** » 07.10.2009, 11:46

So, der Code ist gekürzt, hoffe nur kurz genug. Hatte nun schon viele verschiedene Versionen und immer das gleiche Problem. Auch das Bild samt den Text in einen extra Container zu packen und die extra Zeile darunter bringt nichts.

P.S. das mit dem overflow versuche ich gleich mal, denn das hatte ich noch nicht...

Also hier mal der Code

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style media="screen" type="text/css">
body &#123;
width&#58; 100%;
margin&#58; 0;
&#125;

#main &#123;
min-width&#58; 760px;
max-width&#58; 1024px;
height&#58; 100%;
border-right&#58;1px solid #aaa;
border-bottom&#58;1px solid #aaa;
background-color&#58;#ddd;
position&#58;relative;
&#125;


#header &#123;
padding&#58; 0;
height&#58; 95px;
background-color&#58;#FFF;
&#125;
   
#topline, #footer &#123;
background-color&#58; #aaa;
padding&#58; 0;
height&#58; 18px;
clear&#58;both;
&#125;

#inhalt &#123;
margin-left&#58; 190px;
margin-right&#58; 180px;
padding&#58; 10px;
background-color&#58;#FFF;
border&#58;1px solid #000;
position&#58;relative;
&#125;

#content &#123;
width&#58; 100%;
position&#58;relative;
&#125;

#links &#123;
background-color&#58;#ddd;
width&#58; 180px;
float&#58; left;
margin-top&#58; 10px;
margin-left&#58; 5px;
margin-right&#58; 5px;
&#125;

#rechts &#123;
background-color&#58;#ddd;
width&#58; 170px;
float&#58; right;
margin-top&#58; 10px;
margin-right&#58; 3px;
&#125;

.ukliste &#123;
background-color&#58; #FFFFFF;
line-height&#58;18px;
border-bottom&#58; 1px solid #000;
padding-bottom&#58; 10px;
padding-top&#58; 5px;
position&#58; relative;
&#125;

.ukliste&#58;hover &#123;
background-color&#58;#E6E6E6 !important;
&#125;

.thumb &#123;
border&#58; 1px solid #000;
float&#58; left;
padding&#58; 3px;
margin&#58; 5px 5px 5px 0px;
position&#58; relative;
background&#58; #FFFFFF;
&#125;
</style>

</head>


<body>
<div id="main"> <!-- für Breitenanpassung -->
<div id="header"></div>
<div id="topline">Inhalt von Topline</div>


<div id="links">
Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte
</div> <!-- !links -->


<div id="rechts">
Inhalt der rechten Spalte
</div> <!-- !rechts -->


<div id="inhalt">
  <div id="content">
  <h1>Überschrift</h1>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />

  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>
  
  <div class="ukliste"><img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
  <h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p><div style="clear&#58;left;"></div>Die Zeile muss unter das Bild - nicht floaten</div>

  </div> <!-- !content -->
</div> <!-- !inhalt -->


<div id="footer">
Inhalt vom Footer
</div><!-- !footer -->

</div> <!-- !main -->

</body>
</html>

Beitrag von **Synonym** » 07.10.2009, 11:51

@turgay

Also wenn ich dem #inhalt ein "overflow: hidden;" mitgebe, dann scheint es soweit zu funktionieren. Den Rest muss ich mir nun mal ansehen. Habe leider schon sehr viel geändert die letzten Tage

Beitrag von **mgutt** » 07.10.2009, 12:00

Ich hatte jetzt ukliste das overflow:hidden; gegeben. Dann gehts auch

Beitrag von **Synonym** » 07.10.2009, 12:07

@mgutt
Stimmt, geht auch in dem Fall. Muss das nun mal durchtesten.

Im Container Inhalt gibt es noch mehr Elemente, die ukliste war nur eine als Beispiel, daher das overflow erst mal direkt für #inhalt.

Danke euch allen!

Beitrag von **turgay** » 07.10.2009, 12:38

Ich verwende in letzter Zeit immer öfter sogenannte CSS-Frameworks. Mein Favorit: Blueprint.
Hat man sich einmal reingefuchst, erspart es einiges an Ingenieursarbeit.

Beitrag von **Nullpointer** » 07.10.2009, 12:48

https://de.wikipedia.org/wiki/YAML_%28Framework%29

Beitrag von **Synonym** » 07.10.2009, 13:09

Ja, das YAML habe ich schon gesehen und auch mal getestet. Im Einsatz habe ich es allerdings noch nicht. Für neue Projekte sicherlich interessant, aber mein aktuelles sollte eigentlich nur eine kleine Anpassung werden

Beitrag von **tryout** » 08.10.2009, 09:36

Wie wär`s damit?...

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style media="screen" type="text/css">
body &#123;
width&#58; 100%;
margin&#58; 0;
&#125;

#main &#123;
min-width&#58; 760px;
max-width&#58; 1024px;
height&#58; 100%;
border-right&#58;1px solid #aaa;
border-bottom&#58;1px solid #aaa;
background-color&#58;#ddd;
position&#58;relative;
&#125;


#header &#123;
padding&#58; 0;
height&#58; 95px;
background-color&#58;#FFF;
&#125;
   
#topline, #footer &#123;
background-color&#58; #aaa;
padding&#58; 0;
height&#58; 18px;
clear&#58;both;
&#125;

#inhalt &#123;
margin-left&#58; 190px;
margin-right&#58; 180px;
padding&#58; 10px;
background-color&#58;#FFF;
border&#58;1px solid #000;
position&#58;relative;
&#125;

#content &#123;
width&#58; 100%;
position&#58;relative;
&#125;

#links &#123;
background-color&#58;#ddd;
width&#58; 180px;
float&#58; left;
margin-top&#58; 10px;
margin-left&#58; 5px;
margin-right&#58; 5px;
&#125;

#rechts &#123;
background-color&#58;#ddd;
width&#58; 170px;
float&#58; right;
margin-top&#58; 10px;
margin-right&#58; 3px;
&#125;

.ukliste &#123;
background-color&#58; #FFFFFF;
line-height&#58;18px;
border-bottom&#58; 1px solid #000;
padding-bottom&#58; 10px;
padding-top&#58; 5px;
float&#58; left;
width&#58; 100%;
&#125;

.ukliste&#58;hover &#123;
background-color&#58;#E6E6E6 !important;
&#125;

.ukliste .left &#123;
	float&#58; left;
	width&#58; 30%;
&#125;

.ukliste .right &#123;
	float&#58; right;
	width&#58; 70%;
&#125;

.img_title &#123;
	font-size&#58; 7pt;
	line-height&#58; 120%;
&#125;

.thumb &#123;
border&#58; 1px solid #000;
padding&#58; 3px;
margin&#58; 5px 5px 5px 0px;
background&#58; #FFFFFF;
&#125;

.clear &#123;
	clear&#58; both;
&#125;
</style>

</head>


<body>
<div id="main"> <!-- für Breitenanpassung -->
	<div id="header"></div>
	<div id="topline">
		Inhalt von Topline
	</div>


    <div id="links">
    	Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte<br /> Navpunkte
    </div> <!-- !links -->


    <div id="rechts">
    	Inhalt der rechten Spalte
    </div> <!-- !rechts -->


<div id="inhalt">
  <div id="content">
  	<h1>Überschrift</h1>
 
    <div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
	
	<div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
	
	<div class="ukliste">
        <div class="left">
        	<img class="thumb" src="http&#58;//www.google.de/logos/chinanatlday60.gif" width="100" height="75" />
        	<p class="img_title">Die Zeile muss unter das Bild - nicht floaten</p>
        </div>
        <div class="right">
        	<h3>Überschift H3</h3><p>Dieser Text umläuft das Bild. Die Länge ist variabel. Von sehr lang bis sehr kurz.</p>
        </div>
    </div>
 	
	<div class="clear"></div>
	
	</div>
</div> <!-- !inhalt -->


<div id="footer">
Inhalt vom Footer
</div><!-- !footer -->

</div> <!-- !main -->

</body>
</html>

Beitrag von **nerd** » 10.10.2009, 22:05

www.960.gs ist als css framework sehr leicht verdaulich um die grids hinzubekommen. oder bei wordpress template seiten ein layout suchen und anpassen.