Style Höhe eines Div erben

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Style Höhe eines Div erben »

princemichi

Jungspund

Dabei seit: 19.07.2010

Beiträge: 12

Dienstag, 24. August 2010, 22:05

Hi.

Ich habe gerade 3 divs.
einen head div, dass die zwei content divs umschließt.

die zwei content divs sollen von der höhe flexibel sein und das head div soll diese dann mit einem border umschließen (tuts auch schon, siehe bild).
jetzt habe ich gerade das problem, dass sich der untere border des head divs nicht an die max. höhe der beiden content divs anpasst.

content divs sind jew. rechts und links, der großen box. head div ist der border, der großen box (siehe bild).

wie mache ich es, dass der head div die höhe (+padding von head div) vom höchten content div annimmt?

so siehst aus:

Cascading Style Sheet

/*
 * Section: Server Details (show_server)
 */

div#MiddleContent {
	margin-top: 3px;
	padding: 5px;
	border:1px solid #000000;
	min-height: 365px;
}

div#MiddleLeft {
	float: left;
	width: 60%;
}

div#MiddleRight {
	float: right;
	width: 40%;
}

Vielen Dank schon mal und Grüße,
P.M.

MAP - Mumb1e Admin Plugin (http://www.mumb1e.de/ )

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »princemichi« (24. August 2010, 22:05)

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 576

Dienstag, 24. August 2010, 23:29

Wenn das div#MiddleContent die beiden middleLeft und middleRight beinhaltet und die Höhe auf height: 365px; begrenzt ist, dann dürfte es normal gehn wenn du die beiden anderen div mit der höhe von 100% machst.

Cascading Style Sheet

/*
 * Section: Server Details (show_server)
 */

div#MiddleContent {
	margin-top: 3px;
	padding: 5px;
	border:1px solid #000000;
	height: 365px;
}

div#MiddleLeft {
	float: left;
	width: 60%;
        height: 100%;
}

div#MiddleRight {
	float: right;
	width: 40%;
        height: 100%;

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 013

Mittwoch, 25. August 2010, 13:23

Man muss unter die gefloateten Elemente eine Element mit clear setzen, frag mich nicht warum.

	HTML
1 2 3 4 5	<div> <div>float 1</div> <div>float 2</div> <br style="clear:both;" /> </div>

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

princemichi

Jungspund

Dabei seit: 19.07.2010

Beiträge: 12

Mittwoch, 25. August 2010, 14:22

Zitat von »Skittles«

Man muss unter die gefloateten Elemente eine Element mit clear setzen, frag mich nicht warum.

Perfekt! Das wars....mal wieder selbst wien ochse davor gesessen :-) ...schon 100x gemacht

Grüße,
P.M.

MAP - Mumb1e Admin Plugin (http://www.mumb1e.de/ )

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »princemichi« (25. August 2010, 14:22)

stfschaefer

Tripel-As

Dabei seit: 21.08.2010

Beiträge: 202

Donnerstag, 26. August 2010, 02:58

Zitat von »Skittles«
Man muss unter die gefloateten Elemente eine Element mit clear setzen, frag mich nicht warum.
HTML
1
2
3
4
5
<div>
<div>float 1</div>
<div>float 2</div>
<br style="clear:both;" />
</div>

Der Grund ist der, dass weitere div-Elemente dann unter die gefloateten Elemente ebenfalls gefloatet werden. Sie sind dann eine Erweiterung und die Spaltenstruktur der Divs bleibt erhalten.

Mit dem Clear sagt man dem Browser ganz einfach "Jetzt ist Schluss und fange unter den gefloateten Elementen wieder normal an und die Breite der Elemente haben dann wieder volle Seitenbreite, bzw. die Breite gemäss dem übergeordneten Element.

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

Samstag, 28. August 2010, 15:00

Ein extra "clear" Element einzubauen war zwar lange gängige Praxis, ist aber im weiterne Sinne nicht korrekt, da man ja dafür ein "sinnloses" HTML Element einbauen muss. Deshalb gibt man dem Umgebenden DIV einfach die Eigenschaft "overflow:auto" und spart sich das clearen. Clearen geht zwar es geht aber schöner

Weitere Infos dazu..

Gruß
Phos

princemichi

Jungspund

Dabei seit: 19.07.2010

Beiträge: 12

Sonntag, 29. August 2010, 22:32

Danke. Ich habs jetzt auf die altmodische Art gemacht. Werde dies jetzt. weil ich faul bin auch so lassen... :-), aber definitiv in zukunft das neumodische ausprobieren und es nicht vergessen :-)

MAP - Mumb1e Admin Plugin (http://www.mumb1e.de/ )