2 span's wie 2 Tabellenspalten formatieren

[shutdown]

Hi!

Ich hab eigentlich ein einfaches Problem, aber ich finde einfach keine Lösung.

Ich möchte 2 span's nebeneinander positionieren und sie sollen sich verhalten wie 2 Tabellenspalten, d.h. wenn eine Spalte länger ist als die andere, dann soll die andere sich gleich mit vergrößern, und die Tabelle als Ganzes hat keine feste Höhe, sondern soll so hoch sein wie die größte Spalte.

Das ist ja eigentlich nicht schwer - ich möchte das jetzt aber sowohl im IE 7, als auch im Firefox richtig angezeigt bekommen.

Das was meiner Vorstellung am nächsten kommt ist folgendes:

<div style="border: 1px solid blue;">




<span style="height: 100%; background:yellow; display: blocK; float: left;">
	adfadsfas
</span>

<span style="height: 100%; background:blue;">
	asdfasdfasdf
	asdf<br>
	asdf<br>
	asdf<br>
	asdf<br>
	asdf<br>
</span>

</div>

Allerdings bricht der erste span hier im Firefox aus dem div aus und im IE wird der erste span so lange nicht voll angezeigt, bis ich dem div eine feste Höhe gebe.

Was übersehe ich hier?

Vielen Dank
shutdown

 

[Maik]

Das folgende Stylesheet habe ich in allen mir zur Verfügung stehenden Browsern erfolgreich getestet:

#wrapper {
border: 1px solid blue;
}
#outer {
position: relative;
border-left: 100px solid yellow;
background: blue;
}
#inner {
margin-left: -100px;
}
#left {
float: left;
display: block;
position: relative;
width: 100px;
left: 0px;
}
#right {
margin-left: 100px;
display: block;
position: relative;
height: 1%;
}
#clear {
clear: left;
}

<div id="wrapper">
     <div id="outer">
          <div id="inner">
               <span id="left">
                     adfadsfas
               </span>
               <span id="right">
                     asdfasdfasdf
                     asdf<br>
                     asdf<br>
                     asdf<br>
                     asdf<br>
                     asdf<br>
               </span>
               <div id="clear">&nbsp;</div>
          </div>
     </div>
</div>

 

[shutdown]

Hmm,

erst mal danke.
Allerdings zeigt dein Code ähnliches Verhalten wie meiner (im Bildanhang zu sehen).
Das Bild stammt von Firefox in Version 1.5.irgendwas.
Allerdings stimmt das Ganze im IE 6.

gruß shutdown

 

[Maik]

Oh, sorry! Bei mir tritt der Fehler im Firefox 2.0 nicht auf.

Vielleicht hilft es, wenn du eine minimale Schriftgröße angibst?

#clear {
clear: left;
font-size: 1px;
}

 

[shutdown]

Okay, habs jetzt auch mal mit Firefox 2.0 getestet (übrigens unter Windows).
Ist aber das selbe Bild wie unter 1.5.
Die font-size von 1 macht das Ganze eher noch "schlimmer", soll heißen, dass nur noch die erste Zeile der rechten Spalte im farbigen Bereich liegt.
Ein font-size von 80 würde passen, aber dann ist das ja alles andere als anpassungsfähig.

//edit

okay, ein Problem hab ich gefunden:

#right {
margin-left: 100px;
display: block;
position: relative;
height: 1%;
}

Diese height-Angabe muss weg, dann sind die Spalten so hoch, wie ihr Inhalt und wir haben grundsätzlich das Tabellenverhalten.

Dann wäre da noch ein letztes Problem:
Der clear-div enthält ein  
Dadurch wird praktisch eine Leerzeile noch an die Spalten rangehängt - in beiden Browsern gleich.
Nehm ich dieses   jetzt weg, dann zeigt der Firefox diese Leerzeile nicht mehr an und alles ist wunderbar. Der IE allerdings kann dann die Border des Wrappers nicht mehr anzeigen, sondern erst wieder, wenn der clear-div eine feste Höhe hat.
Allerdings bewirkt auch eine Höhe von nur 1px, dass im IE wieder eine komplette Leerzeile angezeigt wird.

 

[Maik]

Tut mir leid, aber ich kann nicht nachvollziehen, was da bei dir falsch läuft.

Bei mir sieht das Ergebnis wie gewünscht aus. In dem Anhang, habe ich mal Firefox 2.0 und IE 6.0 gegenübergestellt. In den anderen Browsern (Mozilla, Netscape, Opera & SeaMonkey) sieht es genauso aus. Getestet habe ich unter Win2k Prof. SP4