• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div layer wachsen nicht mit Inhalt

M

mannyk

Neues Mitglied
Hallo liebe Community,

ich habe nun viel gegoogelt, aber mein Problem immer noch nicht in den Griff bekommen können.

Ich habe folgende Seite: Die Div-Layer "site" und "content" beinhalten zwei weitere divs, wo sich der eigentliche Inhalt der Seite befindet. Leider scheinen sind eben diese beiden divs eine Höhe von 0 zu haben.

Wie schaffe ich es, dass diese mit dem in halt in "upperContent" und "content" mitwachsten?

Vielen Dank und lg,
mannyk

Anbei der Source Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
#site {
	position:relative;
	margin: 0px auto;
	border: 1px solid #CDC3B7;
	width: 599px;
}
#content_bg
{
	width: 599px;
	position:absolute;
	float: left;
	background-color: #000;
}

#content
{
	position:absolute;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
	top: 310px;
	left: 0;
	width:580px;

}

#upperContent
{
	position:absolute;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	top: 125px;
	left: 150px;
	width: 440px;
	height: 100px;
	background-color: #444;
	
}
</style>

</head>
<body>





<div id="site">
        <div id="content_bg">
            <div id="upperContent">
                upper
            </div>
            <div id="content">
                normal content
            </div>
        </div>
</div>

</body>
</html>
 
Werbung:
Verzichte auf absolute Positionierung, dann siehst Du auch die Boxen und hast weniger Probleme.
 
jup, anstatt absolute einfach relative, dann müsste das funzen.

und nur so am Rande, wenn wie bei dir eh alle margins und paddings 0px sind ( margin: 0px 0px 0px 0px; ) reichts auch, wenn du schreibst margin: 0;. Das gilt dann für alle Seiten, und die Bezeichnung px brauchst du da auch net, weil ob da jetz steht px oder cm oder wat auch immer, 0 = 0, egal was für ne Einheit.
 
Werbung:
Hallo und danke für eure schnelle Hilfe!
Ich habe nun die Änderungen vorgenommen und die "absolute"-Werte durch relative Werte ersetzt (sonst hab ich nicht wirklich andere Änderungen vorgenommen).

Beide divs (also site und content_bg) gehen auch weiter runter (bis zum div "upperContent"). Aber ich hätte ja gern, wenn beide divs bis ganz nach unten gehen.

Habt ihr eine Idee, was sonst noch nicht stimmen könnte?

Hier nochmal der geänderte Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#site {
	position:relative;
	margin: 0px auto;
	border: 1px solid #000;
	width: 599px;
	background-color: #444;

}
#content_bg
{
	width: 599px;
	position:relative;
	background-color: #222;

}
#content
{
	position:relative;
	padding: 0 10px 0 10px;
	margin: 0;
	top: 310px;
	left: 0;
	width:580px;
	background-color: #ddd;
}
#upperContent
{
	position:relative;
	padding: 0;
	margin: 0;
	top: 125px;
	left: 150px;
	width: 440px;
	height: 100px;
	background-color: #ccc;
}
</style>
</head>
<body>
<div id="site">
        <div id="content_bg">
            <div id="upperContent">
                upper
            </div>
            <div id="content">
                normal content
            </div>
        </div>
</div>
</body>
</html>

Lg und Danke,
mannyk
 
toney schrieb:
jup, anstatt absolute einfach relative, dann müsste das funzen.
Zum Vergrößern anklicken....

Der Vorgabewert für alle Positionierungen ist "position: static;". Die relative Positionierung ist auch hier völlig unnötig.

mannyk schrieb:
Beide divs (also site und content_bg) gehen auch weiter runter (bis zum div "upperContent"). Aber ich hätte ja gern, wenn beide divs bis ganz nach unten gehen.

Habt ihr eine Idee, was sonst noch nicht stimmen könnte?
Zum Vergrößern anklicken....

Schau dich mal nach faux columns um.
 
ok, ich hab jetzt die Werte auf static gesetzt. Allerdings muss ich ja die beiden divs auf das Pixel genau positionieren können, und das geht mit static doch nicht.

Die Faux Colums haben mir leider auch nicht wirklich bis jetzt geholfen.
 
Werbung:
Du musst static nicht setzen, weil das schon der Vorgabewert für jegliches Element ist.

Wo dein Problem mit Faux Columns ist, kann ich ohne deinen Quellcode leider nicht erahnen. In dem Code oben sehe ich sie zumindest nicht.
 
Nun ja, der Begirff kam mir schon vor meinem Forumspost unter, als ich googelte. Allerdings glaube ich, dass das nicht ganz mein Problem löst.
Mein Problem ist es, dass content_bg nicht mit dem Inhalt aus content oder upperContent mitwächst.
 
Dann kann ich nur weiter vermuten (!), dass Du content und upperContent oder etwas darin floatest wodurch diese beiden ihre Höhe verlieren. Wer floatet muss auch Clearen. Ist aber wie gesagt nur eine Vermutung.
 
Werbung:
Ich habe aber keinerlei floats definiert. Die Höhen der beiden content-divs habe ich aber auch nicht definiert (da diese ja variabel hoch sein sollen).

Das ist mein ganzer Code mit dem ich teste:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#site {
	margin: 0px auto;
	border: 1px solid #000;
	width: 599px;	
}
#content_bg
{
	width: 599px;
}
#content
{
	position: relative;
	padding: 0 10px 0 10px;
	margin: 0;
	top: 310px;
	left: 0;
	width:580px;
	background-color: #ddd;
}
#upperContent
{
	position: relative;
	padding: 0;
	margin: 0;
	top: 125px;
	left: 150px;
	width: 440px;
	height: 100px;
	background-color: #ccc;
}
</style>
</head>
<body>
<div id="site">
        <div id="content_bg">
            <div id="upperContent">
                upper
            </div>
            <div id="content">
                normal content
            </div>
        </div>
</div>
</body>
</html>
 
Hab mir deinen Code eben gespeichert und ausprobiert. Nimm endlich die "position"-Eigenschaften raus. Dann klappt es auch.
 
In dem ich die Position-Eigenschaften rausnehm verlieren aber die beiden div - container auch ihre position. Und das will ich ja auch nicht...
Dann wachsen die divs zwar mit, aber die content divs sollten eben genau ausgerichtet werden können.

Danke für deine Mühe!
 
Werbung:
Was meinst Du mit "genau ausgerichtet"? Die Positionierungen relativ zueinander kann man mit Außenabständen und floats sehr gut hinbekommen. Da ich nicht weiß was Du letztlich für ein Layout erreichen will kann ich aber auch hier wieder nur raten.
 
Danke, mit deiner Frage hast du meine beantwortet.

Ich wusste nicht, dass eine Positionierung auch mit der Definition von Aussenabständen möglich ist. Jetzt passt alles!

Danke nochmals!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben