css höhenproblem...

[antiheld2000]

hi,

ich habe ein, wie ich finde, merkwürdiges problem mit der höhe meines contents. das problem betrifft nur firefox und safari. ich habe einen seitenaufbau wie folgt:

<div id="content">
	<div id="sidebar">
		<div id="menu_vert">Menue Inhalt
		</div>
	</div>
	<div id="main">
		<h2>Headline</h2>
		<p>Lorem ipsum dolor</p>
	</div>
</div>

sidebar soll links floaten und dann der content kommen. nun möchte ich, dass die höhe des contents eine mindestgrösse hat und sich dann mitsterckt, je nach main bzw. sidebarhöhe. das wird mit folgendem code auch ganz gut erzielt, nur leider nur mit der div main. wenn der inhalt im sidebar höher ist, dann wird die mindesthöhe genommen und mehr nicht.

div#main {
	margin:0 2% 0 29%;
	padding:0 45px 0 0;
	overflow:visible;
	border:none;
	height:auto;
	background:#0000ff;
}

div#sidebar {
	float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
	width: 26%;     /* sidebar width, if you change this please also change #main margins */
	display: inline;/*  /* FIX IE double margin bug */
	margin: 0;
	overflow:auto;
	border:none;
	background:#00ff00;
}

div#content {
	padding:0;
	margin:0;
	min-height:344px;
	height:auto !important;
	height:344px;
	border:1px dotted green;
	background:#ff000;
}

hier seht ihr das problem in aktion. der rahmen soll logischerweise immer die höhe des höheren divs inside erhalten. was tun?!
test1 test2

bin echt am verzweifeln...

 

[dkdenz]

Vielleicht bringt Dich das hier weiter, denn ehrlich gesagt,
habe ich nicht ganz verstanden, was Du da geschrieben hast:
No.1 :: CSS Template :: XTML 1.0 Transitional

 

[anna55]

Hm, es liegt an der Überschrift, die der FF (Safari kann ich nicht testen) hier anders als die IEs bewertet. Am schnellsten hast Du das Problem weg mit einer Formatierung für h2:

h2 {
margin-top:0;
}

 

[antiheld2000]

so, danke für die antworten. die einfache lösung:

<div id="content">
	<div id="sidebar">
		<div id="menu_vert">Menue Inhalt
		</div>
	</div>
	<div id="main">
		<h2>Headline</h2>
		<p>Lorem ipsum dolor</p>
	</div>
<div style="clear:both;"></div>
</div>

 

[anna55]

so, danke für die antworten. die einfache lösung:

Hm, ohne das Clearen aber mit h2-Formatierung funktioniert Dein Plan, nur mit clear:both nicht. Du hast bei Deiner Test2-Seite beides im Angebot. Was den Code auf der Testseite anbelangt, kannst Du also getrost clear weglassen.