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

DIV in DIV - Elternelement

C

ChillerT

Mitglied
Hallo,
ich habe eine relative Anfängerfrage, bzw ein Problem, welches mir Tag ein Tag aus noch Probleme macht.

Ich würde gerne wissen wie ich einen DIV-Container einem übergeordneten zugehörig machen kann.

Also dass absolute und relative positionierungen von innen liegenden Containern nicht vom body sondern vom übergeordneten Container ausgehen.

Bedanke mich im Voraus für hilfreiche kurzantworten :)

EDIT:
Kurze Erläuterung:
HTML: 
<div id="main_container">
    <div id="inner_container1">
    </div>
    <div id="inner_container2">
    </div>
</div>
<div id="footer">
</div>
Die Maincontainer sollen dem main_container so zugeordnet werden, dass diese den main auch nach unten größer ziehen.
Der footer soll dann auch mit nach unten rücken.
 
Zuletzt bearbeitet:
Du musst dein #footer clearen (clear:both;)
Hier mal ein Beispiel
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Beispiel-Layout</title>    
<style type="text/css"> 

* {
 margin:0;
 padding:0;
}

#main {
 position: relative; 
 width: 900px;
 margin: 0 auto; 
 overflow:auto;
}

#header {
 background:#eed;
}

#col1 {
 float: left;
 min-height: 250px;
 width: 50%;
 background: #aae;
}

#col2 {
 margin-left:50%;
 width: 50%;
 background: #ddd;
}

#col2:after {
 content:".";
 display:block;
 line-height:0;
 height:0;
 width:0;
 visibility:hidden;
 clear:both;
}

#footer    {
 clear:both;
 background: #dda;
}

#footer p {
 padding:10px;
}

h1 {
 padding:10px;
 text-align:center;
}

h2 , p {
 padding:10px;
}


</style>
</head>
<body>
<div id="main">
<div id="header"><h1>Homepage</h1></div>
<div id="col1"><h2>Spalte 1</h2></div>
<div id="col2"><h2>Spalte 2</h2></div>
<div id="footer"><p>Footer</p></div>
</body>
</html>
 
Vielen Dank, aus diesem Quellcode kann ich viel Informationen entnehmen und lernen.

Eine Frage habe ich dazu jedoch, die 2. Spalte wird einfach im linken float gelassen und verschoben, was spricht gegen den float:roght bei spalte 2?
Zudem verstehe ich nicht warum Spalte 2 automatisch die Höhe von Spalte 1 annimmt wenn es im selben Float liegt.
Float regelt doch die horizontale Anordnung oder liege ich da falsch?

Vielen Dank
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben