✔ DIV-Container in der Höhe an andere DIV anpassen

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

CSS ist echt schwer und was die "automatische" Höhe von DIV´s angeht ein Buch mit sieben Siegln für mich.

Also ich versuche ein Layout zu basteln welches im Browser horizontal zentriert wird und 3 Spalten hat. Hier möchte ich einzelne DIV´s pixelgenau positionieren können. Das Layout ist noch nicht fertig aber ich stosse auf das Problem mit den Spaltenhintergründen.

Ich habe einen Container "gebastelt" welcher auch das Hintergrundimage enthält.
Leider passt sich der Container (#kasten) nicht der Höhe des jeweils höchsten DIV-Containers an.

Ich habe auch schon für #kasten versucht height: 100% einzugeben jedoch ohne Erfolg!

Wie kann ich erreichen, dass #kasten in der Höhe entsprechend angepasst wird.
Am liebenst wäre mir das er immer über die ganze Browserhöhe läuft.

Hier mein Quellcode:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<style type="text/css">
body { margin:0; padding:0;  color:silver;}
div { border:0px solid #888; }


#kasten {
	width:900px;
	margin: 0px auto;
	text-align: left;
	background-image:url(hintergrund.jpg);
	position:relative;
}

#rechtespalte {
	position:absolute;
	width: 200px;
	top:0px;
	left:0px;
	
}

#content {
	position:absolute;
	top: 50px;
	left: 200px;
	width: 500px;
	border: 0px;
	background-color:green;
}

#linkespalte {
	position:absolute;
	width: 200px;
	top:0px;
	left:700px;
	
}

</style>
</head><body>

<div id="kasten">

	<div id="rechtespalte" >rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/></div>
	<div id="content">content</div>

	<div id="linkespalte">linke spalte</div>
	
	
</div>

</body></html>

Vielen Dank für eure Hilfe im voraus!
 
Hi,

für dein Vorhaben ist die absolute Positionierung der inneren Blöcke ungeeignet.

Verwende stattdessen die float-Eigenschaft, um die Blöcke nebeneinander auszurichten, und beende abschließend das Floaten mittels der clear-Eigenschaft, um wieder den normalen Textfluß herzustellen, damit sich auch die Höhe des Elternelements der Spaltenhöhen angleicht.

In meiner Signatur sind zwei Tutorials genannt, die dir für dein Vorhaben behilflich sind, da sie sich ebenfalls mit einem dreispaltigen Layout befassen, das im Fenster horizontal zentriert ist.

mfg Maik
 
Hallo Maik,

mit float glaube ich kann ich das nicht machen was ich will.
Ich muss z.B. mehrere DIV teilweise überlappend übereinander darstellen. Hier handelt es sich um dynamische Bilder welche teileweise durch andere abgedeckt werden bzw. durch teilweise transparente gif überlagert werden sollen.

So habe ich im Header links oben einen Bogen mit einem teilweise transparenten gif welches mir ein Foto im #content teilweise überdecken soll. Unterhalb des Fotos hätte ich dann ein DIV mit dem Text der Seite gemacht.
 
Naja, die drei Spalten sollen sich laut deinem Code aber überhaupt nicht überlappen, also spricht hier auch nichts gegen die float-Eigenschaft.

Und dort, wo dies der Fall sein soll, kannst du es ebenso mit position:relative und der z-index-Eigenschaft realisieren.

mfg Maik
 
Hallo Maik,

hier der komplette Beispielcode mit dem überlappenden Bildern.
Das Bild in #logomitte hat eine Breite von 500px und eine Höhe von 330px.
Das Bild in #logolinks hat eine Breite von 450px und eine Höhe von 143px.

Sollte das mit Float und Z-Index gehen würde ich mich freuen, wenn du mir einen Beispielcode posten könntest.
Ich stehe momentan mächtig auf dem Schlauch.

Hier der Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<style type="text/css">
html, body { margin:0; padding:0;  color:silver; height:100%;}
div { border:0px solid #888; }


#kasten {
	width:900px;
	margin: 0px auto;
	height:500px;
	text-align: left;
	background-image:url(hintergrund.jpg);
	position:relative;
}

#rechtespalte {
	position:absolute;
	width: 200px;
	top:200px;
	left:0px;
	
}

#content {
	position:absolute;
	top: 350px;
	left: 200px;
	width: 500px;
	border: 0px;
	background-color:green;
}

#linkespalte {
	position:absolute;
	width: 200px;
	top:100px;
	left:700px;
	
}

#logolinks {
	position:absolute;
	top:0px;
	left:0px;
	
}

#logomitte {
	position:absolute;
	top:0px;
	left:200px;
	
}





</style>
</head><body>

<div id="kasten">
	
	
	
	<div id="rechtespalte" >rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/>rechte spalte<br/></div>
	<div id="content">content</div>
	
	<div id="linkespalte">linke spalte</div>
	
	<div id="logomitte"><img src="event.jpg"></div>
	<div id="logolinks"><img src="Logobogenklein.gif"></div>

</div>

</body></html>
 
Eine Vorlage mit dem Beispielcode für das dreispaltige Layout kannst du doch aus meinen beiden empfohlenen Tutorials entnehmen, und auf deine Bedürfnisse abändern :confused:

Übrigens hast du gemäß den left-Positionsangaben die beiden äußeren Spalten falsch benannt.

mfg Maik
 
Hallo Maik,

jetzt bin ich komplett verwirrt.
Wie kann ich denn mit float zwei DIV´s teilweise übereinander schieben?

Zur verdeutlichung meines Problems anbei noch ein Screenshot wie es aussehen soll.
Links ist der Bogen und in der Mitte das Bild. Das sind die beiden Elemente welche sich überlappen sollen.
 

Anhänge

  • problem.jpg
    problem.jpg
    160,7 KB · Aufrufe: 211
Zuletzt bearbeitet:
Beispielsweise so:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<title>...</title>
<style type="text/css">
html, body { margin:0; padding:0;  color:silver; height:100%;}
div { border:0px solid #888; }

#kasten {
	width:900px;
	margin: 0px auto;
	min-height:500px;
	text-align: left;
	background-image:url(hintergrund.jpg);
	position:relative;
}

#logolinks {
	float:left;
	position:relative;	
	z-index:2;
}

#logomitte {
	margin-left:200px;	
	position:relative;	
	z-index:1;
}

#logolinks img, #logomitte img {	
	position:absolute;	
}

#linkespalte {
	width: 200px;
	top:150px;
	float:left;
	position:relative;
}

#content {
	top: 350px;
	width: 500px;
	border: 0px;
	background-color:green;
	float:left;
	position:relative;
}

#rechtespalte {
	width: 200px;
	top:200px;
	float:left;
	position:relative;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>
</head>
<body>

<div id="kasten" class="clearfix">
	<div id="logolinks"><img src="Logobogenklein.gif" width="450" height="143" alt="" /></div>
	<div id="logomitte"><img src="event.jpg" width="500" height="330" alt="" /></div>	
	
	<div id="linkespalte">linke spalte<br />linke spalte<br />linke spalte<br />linke spalte<br />linke spalte<br /></div>
	<div id="content">content</div>
	<div id="rechtespalte">rechte spalte</div>
</div>

</body>
</html>


mfg Maik
 
Hallo Maik,

ok soweit klar.
Jedoch wird mir der Hintergrund aus #kasten hier auch nicht verlängert.
Wenn ich z.B. eine der Spalten länger habe als die min-height von #kasten.
Was muss ich jetzt noch tun das er es macht?
 
CSS: 
#linkespalte {
	width: 200px;
	margin-top:150px; /* anstelle von top:150px */
	float:left;
	position:relative;
}

#content {
	margin-top: 350px;  /* anstelle von top:350px */
	width: 500px;
	border: 0px;
	background-color:green;
	float:left;
	position:relative;
}

#rechtespalte {
	width: 200px;
	margin-top:200px;  /* anstelle von top:200px */
	float:left;
	position:relative;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück