✔ 2 Divs immer gleich gross

[Adi | tmine]

Hiho ich komm grad nit weiter,...

Hab ein problem mit 2 divs, und zwar der sidebar und dem content
unten mein CSS Code, ...

Also ich will, dass das Side div gleich gross is wie der Content.
Zuerst dachte ich, ich könne das leicht mit 100% height machen, aber das geht ja nur mit width... leider. Was muss ich nun machen, das die gleich gross sind?

CSS CODE:

#content
{
	border: solid 1px green;
	height: auto;
	width: 600px;
}
#header
{
	border: solid 1px green;
	height: 150px;
	width: 800px;
}
#side
{
	border: solid 1px red;
	float: left;
	height: 100%;
	width: 200px;
}
#page
{
	height: auto;
	width: 800px;	
	border: solid 1px purple;
	margin: auto;
}
#main
{
	height: auto;
	width: 800px;
	border: solid 1px black
}

PS: Ich brächte ne lösung, die auch im IE geht, danke ...

Linkes Bild: FF
rechtes Bild: IE

 

[Maik]

Hi,

hierfür benötigst du einen "Workaround", damit sich die Spalten augenscheinlich in der Höhe angleichen - wie beispielsweise:

• http://redmelon.net/tstme/3cols2/
• http://www.alistapart.com/articles/fauxcolumns/

 

[Adi | tmine]

hmm oke aber eigentlich sollte sich ein überdiv doch der height des unterdivs anpassen wenn height: auto; gesetzt is oder?

ps: also der IE macht das perfekt, nur FF hat probleme

 

[Maik]

Selbstverständlich richtet sich die Höhe des Elternelements an der Höhe seines Kindelements aus.

Du willst aber, dass sich zwei Nachbarelemente in der Höhe angleichen, oder hab ich da was missverstanden?

Was macht der IE perfekt? Auf deinem Screenshot setzt er die linke Spalte unterhalb der rechten Spalte an.

 

[Adi | tmine]

ok sorry schlecht beschrieben von mir

Hier nochmal ein neuer Screenshot.
also das Problem sollte nun eigentlich ersichtlich sein.

Das Menu Div sollte doch eigentlich die grösse des übergeortneten Divs regeln, tut es aber nicht.

Nochmals den CSS CODE:

#content
{
	border: solid 1px green;
	height: auto;
	width: 600px;
	margin-left: 180px; 
}
#header
{
	border: solid 1px green;
	height: 150px;
	width: 800px;
}
#side
{
	border: solid 1px red;
	float: left;
	height: auto;
	width: 150px;
}
#page
{
	height: auto;
	width: 800px;	
	margin: auto;
}
#main
{
	height: auto;
	width: 800px;
	border: solid 1px black
}
#footer
{
	height: auto;
	width: 800px;
	border: solid 1px black
}

 

[Maik]

ok sorry schlecht beschrieben von mir

Dem kann ich nicht widersprechen.

Das Menu Div sollte doch eigentlich die grösse des übergeortneten Divs regeln, tut es aber nicht.

In diesem Fall muss die Floatumgebung zum Abschluss "gecleart" werden, damit die umschliessende Box (#main?) ihre tatsächliche Höe annimmt, und die Spalten sie am unteren Elementrand nicht überlappen - siehe hierzu http://positioniseverything.net/easyclearing.html.

Die in dem Artikel genannte Klasse .clearfix wird dann zusätzlich in dem DIV aufgerufen, das die fliessenden DIVs umschliesst.

 

[Adi | tmine]

hey Danke geht nun alles so wie ichs wollte

Vielen Dank