in einen div zwei vertikal einfügen

[fritzje610]

Hallo zusammen,

ich habe ein kleines css-Problem und weiß nicht wie ich das lösen kann.

#inhalt{
	clear: left;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
	background-color: #FFFFEA;
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 1%;
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
}

Das ist der "Mutter-div". Dieser wird zum Teil so wie er ist gebraucht. Das Problem ist nun, dass ich diesen div in einigen Fällen nochmals in zwei Teilen brauche. Einmal um links ein Menü hinein zu laden und rechts den Inhalt der Menupunkte anzuzeigen.
Mein Gedanke war nun, im css zwei weitere divs anzulegen und dann wenn erforderlich in der aufrufenden Datei anzugeben.

Quasi zwei vertikal geteilte div in einem darüberliegenden div.
(Ich hoffe man kann nachvollziehen was ich vorhabe)

Ich stecke css-mäßig noch in den Kinderschuhen und weiß nun nicht ob das überhaupt geht bzw. man das so macht und auch nicht wie man das löst.

Würdet ihr mir bitte weiterhelfen?

[arkos]

Re: in einen div zwei vertikal einfügen

Original geschrieben von fritzje610
Quasi zwei vertikal geteilte div in einem darüberliegenden div.
(Ich hoffe man kann nachvollziehen was ich vorhabe)

in meinen augen hast du eine simple verschachtelung vor. das ist (auch mit css) gang und gebe

fang doch einfach an, dein vorhaben umzusetzen und komme dann - falls vorhanden - mit konkreten problemen...

viel spaß und glück

[fritzje610]

Da war ich etwas voreilig. Das erste Problem habe ich gelöst.

<div id="inhalt"><h2>Profil</h2>
	<div id="links">
		<a href="a.php">index</a><br />
		<a href="b.php">index</a><br />
		<a href="c.php">index</a><br />
		<a href="d.php">index</a><br />
		<a href="e.php">index</a><br />
	</div>
	<div id="rechts">
		jkhsdajkfhjksdhfjkasdh+#
	</div>
</div>

Somit habe ich zumindest schon mal die beiden kleinen divs in dem großen. Hier noch das css dazu:

#inhalt{
	clear: left;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
	background-color: #FFFFEA;
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 1%;
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
}

#links{
	float: left;
	width: 25%;
	background-color: #FFCC66;
	}

#rechts{
	width: 75%;
	background-color: #33CCFF;
	}

Nun hab eich noch zwei Probleme.

1.)Um den div inhalt wird ein roter Rahmen gezogen. Allerdings "erweitert" dieser sich nicht automtisch, sobbald ich mehr Inhalt in div links haber als die Höhe von inhalt beträgt. Somit schreibt er über den Rahmen hinweg. Lasse ich den float im div weg geht es. Dann habe ich aber das Problem, das die beiden (rechts und links) untereinander stehen. Wie kann ich das lösen?

2.) wie kriege ich es hin, das beide divs immer gleich hoch sind? Damit ich keine Absätze mit den Hintergrundfarben habe?


Bitte um Hilfe !

[fritzje610]

Da war ich etwas voreilig. Das erste Problem habe ich gelöst.

<div id="inhalt"><h2>Profil</h2>
	<div id="links">
		<a href="a.php">index</a><br />
		<a href="b.php">index</a><br />
		<a href="c.php">index</a><br />
		<a href="d.php">index</a><br />
		<a href="e.php">index</a><br />
	</div>
	<div id="rechts">
		Inhalt von Link A
	</div>
</div>

Somit habe ich zumindest schon mal die beiden kleinen divs in dem großen. Hier noch das css dazu:

#inhalt{
	clear: left;
	font-size: 1.2em;
	margin: auto;
	width: 90%;
	background-color: #FFFFEA;
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 1%;
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
}

#links{
	float: left;
	width: 25%;
	background-color: #FFCC66;
	}

#rechts{
	width: 75%;
	background-color: #33CCFF;
	}

Nun habe ich noch zwei Probleme.

1.)Um den div inhalt wird ein roter Rahmen gezogen. Allerdings "erweitert" dieser sich nicht automtisch, sobbald ich mehr Inhalt in div links haber als die Höhe von inhalt beträgt. Somit schreibt er über den Rahmen hinweg. Lasse ich den float im div weg geht es. Dann habe ich aber das Problem, das die beiden (rechts und links) untereinander stehen. Wie kann ich das lösen?

2.) wie kriege ich es hin, das beide divs immer gleich hoch sind? Damit ich keine Absätze mit den Hintergrundfarben habe?


Bitte um Hilfe !

[mcmurphy]

zu 1: google mal zu css & clearfix
zu 2: macht meines Wissens Problem - Hintergrundbild für das umschließende div ist am einfachsten. kannst ja mal allen div's ein height:100%; geben - wenn's das nicht tut bleibt nur das background-image

[fritzje610]

clearfix ist die Lösung. So klappt es.

Schade, dass das mit den gleichhohen divs nebeneinander nicht funktioniert. Da bleibt mir wohl nichts anderes übrig als mit einer Hintergrundfarbe zu arbeiten.

[arkos]

Schade, dass das mit den gleichhohen divs nebeneinander nicht funktioniert.[/B]

hepp, fang:


faux columns

[fritzje610]

Cool, danke. Ich werd mir das mal genauer ansehen. Das schein die Lösung zu sein.

[arkos]

gerne.