Patty: Geklaut, aber nicht verstanden ;-)

Hallo,

ich hab mir folgendes Beispiel aus dem Selfhtml-Weblog
angeschaut und auf folgenden Auszug reduziert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html lang="de">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>  
		<title>Test</title>  
		<style type="text/css">  
			body {  
				color:black;  
				background-color:white;  
			}  
			#container {  
				border:1px solid red;  
				background-color:#CCCCCC;  
			}  
			p {  
				margin:0 0 0.5em 0;  
			}  
			.links-laenger {  
				display:block;  
			}  
			#innen2-links {  
				float:left;  
				width:50%;  
				border-bottom:1px solid green;  
				padding:0.5em 0 0 0;  
				background-color:#EFEFEF;  
			}  
			#innen2-rechts {  
				border:4px solid blue;  
				padding:0.5em 0 0 0;  
				margin-left:50%;  
				background-color:#BBBBFF;  
			}  
			#innen2-rechts:after {  
				content:"clear";  
				clear:both;  
				display:block;  
				height:0;  
				overflow:hidden;  
				visibility:hidden;  
			}	  
		</style>  
	</head>  
	<body class="links-laenger">  
		<div id="container">			  
			<div id="innen2-links">  
				<p>Nam tincidunt leo ac risus hendrerit ultricies. </p>  
			</div>  
			<div id="innen2-rechts">  
				<p>  
					Maecenas arcu risus, ultrices id, tincidunt feugiat, lacinia id, odio. 					  
				</p>				  
				<p>  
					Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.  
					Proin iaculis felis eget pede. Nunc vitae purus. Duis mi pede, rutrum eu, semper sed, ultricies nonummy, pede.  
					Mauris a dolor. Duis dui purus, adipiscing id, lacinia eget,  
					porttitor quis, diam. Cras vel diam. Sed rhoncus luctus felis.  
					Maecenas enim. Morbi quis dolor a justo aliquam condimentum.  
				</p>			  
			</div>	  
		</div>  
	</body>  
</html>

Die rechte Spalte macht genau das, was ich wünsche: Sie ist so hoch, wie der Container, auch wenn weniger Inhalt da steht als in der linken Spalte. Dass das mit dem #innen2-rechts:after zusammenhängt, habe ich erkannt, was es genau mach nicht...

Außerdem hätte ich die Eigenschaften gerne vertauscht, sprich das die linke Spalte immer so hoch ist wie der Container, auch wenn weniger Text drin steht als in der rechten Spalte. Geht das? Und wenn ja: wie?

LG
Patty

  1. Grüße

      	#innen2-rechts:after {  
      		content:"clear";  
    

    erzeuge nach dem #inne2-rechts einen textknoten mit inhalt "content"

      		clear:both;  
    

    bring ihn dazu float zu klären

      		display:block;  
      		height:0;  
      		overflow:hidden;  
      		visibility:hidden;  
    

    verstecke ihn

      	}	  
    

    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
    1. Hallo,

      vielen Dank!!! Damit ist meine erste Frage erschöpfend beantwortet!

      LG
      Patty

  2. Hallo,

    Außerdem hätte ich die Eigenschaften gerne vertauscht, sprich das die linke Spalte immer so hoch ist wie der Container, auch wenn weniger Text drin steht als in der rechten Spalte. Geht das? Und wenn ja: wie?

    ich bekomms leider nicht hin... Hat noch jemand eine Idee?

    LG
    Patty

    PS: faux columns hab ich mir angeschaut, das triffts aber nicht.

    1. Hi!

      Natuerlich. Die erste Idee ist den Code mal aufzuraeumen. Die zweite Idee ist den CSS Klassen und IDs vernuenftige Namen zu geben. Links und rechts und sonstige Beschreibungen die Design und Layout zurueckzufuehren sind, haben darin nichts verloren. Die folgende Loesung zeigt Dir warum:

      Aendere folgende Angaben:

      #innen2-links
          float:right

      #innen2-rechts
          margin-right:50%

      Vertausche die Inhalte der beiden Container.

      Jetzt sollte, das, was im Code als erstes steht auf dem Bildschirm in der 2. Spalte stehen. Etwas irritierend, aber Dein erwuenschter Effekt tritt ein: die erste Spalte auf dem Screen passt sich der zweiten in der Hoehe an.

      --
      Signaturen sind blöd!
      1. Hallo,

        vielen Dank!!!!

        Natuerlich. Die erste Idee ist den Code mal aufzuraeumen. Die zweite Idee ist den CSS Klassen und IDs vernuenftige Namen zu geben.

        Wird gemacht!

        LG
        Patty