Spalten in einen "INhaltsfenster"

[mille]

hallo!

Ich möchte den Inhalt meiner Seite in Spalten darstellen. Um diese Spalten herum soll sich ein Rahmen befinden. Sprich eine ContentPane.

hier der allgemeine aufbau der html für besagte stelle:

<div class="inhalt" ID="ContentPane">
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
</div>

das wird auch schön in Spalten dargestellt.
Allerdings wird das Container DIV nicht richtig vergrößert. Sprich die Spalten stehen unterhalb des ContentPanes. Nur wenn ich die Größe des ContentPanes explizit auf einen Wert (zB 200 px) setze, stehen die Spalten auch innerhalb diesen.

Also muss irgendwo ein Fehler bei meiner CSS Defintiion sein. Die seht ihr hier:

.inhalt {
	padding: 2px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto; 	
	background: #777777;
	border: 1px solid #ffffff;
	text-align:left; 
	width: 510px;
	height: inherit;
}
.spalte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	text-align: justify;
	white-space: normal;
	margin: 5px;
	padding: 2px;
	width: 150px;
	float: left;
}

ich hoffe ihr könnt mir vielleicht sagen, was ich ändern muss?
Ich hab schon unter .inhalt einiges versucht:
height=auto; // geht nicht
height=200px; // geht, aber bringt ja nichts, da ich nicht immer weiss wie groß die INhalte sind (in der höhe)

Thx im voraus

PS: der Fehler tritt allerdings nur beim Firefox (also vermutlich allgemein bei Mozilla) auf. Im IE das alles. Wieso das denn?

 

[Quaese]

Hi,

da du die Spalten mit float aus dem gewöhnlichen Textfluss nimmst, können deren Höhen
nicht ermittelt werden. Als Lösung kannst du ein Element anschliessen lassen, das den Textfluss
wieder herstellt. Dann sollten auch der Rahmen korrekt angezeigt werden.

Element ohne Grösse, das den Testfluss wieder herstellt:

.clearDiv{ line-height: 0;
           font-size: 1px;
           height: 0;
           clear: both;}

Der HTML-Bereich sieht folgendermassen aus:

<div class="inhalt" id="ContentPane">
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
  <div class="spalte">CHier kommt der Text in spalten geteilt rein</div>
  <div class="clearDiv">&nbsp;</div>
</div>

Ich hoffe, dass ich dein Problem richtig verstanden habe.

Ciao
Quaese

 

[mille]

geil!

Danke!

Aber das ist doch beschiss . ich mein ich füge ne leere Spalte ein nur damit die anzeige korrekt ist.

Nun ja, das hatten Tables auch schon irgendwie so an sich


mfg basti

 

[Maik]

geil!

Danke!

Frage beantwortet? Problem gelöst? Dann markiere dein Thema bitte als "Erledigt"!

Thanx ;-]