Mehrere kleine Container links neben einem grpßem Container

backlash86 · #1 (**permalink**) 24.02.2010, 12:40

Hallo,

ich bin gerade ganz neu hier im Forum und habe ein kleines Problem:

Ich würde gerne mehrere kleine Container (Menü, Impressum und Zusatzinfos) link neben einem großen Container (Inhalt) platzieren. Neben dem Inhalt soll dann rechts noch ein Container sein (technische Informationen).

Das Ganze hätte ich am liebsten in einem automatisch mitwachsenden Container (Content), um eine Hintergrundfarbe dahinter zu legen.
Darüber und darunter soll ein jeweils anderer Container (Top, Versandinformationen) sein.

Meine CSS sieht so aus:

.content {
background-color:#333;
width:1024px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:5px;
border-style:ridge;
border-width:thin;
overflow:visible;
}

.top {
background-image:url(banner.jpg);
height:250px;
width:1024px;
margin-left:auto;
margin-right:auto;
border-style:ridge;
border-width:thin;
}

.menu {
background-color:#CCC;
width:200px;
padding-left:5px;
padding-top:5px;
height:auto;
margin-top:5px;
margin-left:3px;
border-style:ridge;
border-width:thin;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
float:left;
clear:left;
}

.inhalt {
background-color:#FFF;
width:555px;
height:auto;
margin-left:5px;
margin-top:5px;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
padding-right:5px;
border-style:ridge;
border-width:thin;
float:left;

}

.rechts {
width:234px;
height:auto;
margin-right:5px;
margin-top:5px;
background:#CCC;
font-size:11px;
font-family:Verdana, Geneva, sans-serif;
border-style:ridge;
border-width:thin;
float:right;
clear:right;
}

.impressum {
width:200px;
height:auto;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:3px;
margin-top:20px;
padding-left:5px;
border-style:ridge;
border-width:thin;
float:left;
clear:left;
}

.links {
width:195px;
height:auto;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:3px;
margin-top:20px;
padding-left:5px;
padding-right:5px;
border-style:ridge;
border-width:thin;
float:left;
clear:left;
}

.versand {
background:#CCC;
height:auto;
width:1019px;
margin-left:auto;
margin-right:auto;
margin-top:5px;
padding-left:5px;
border-style:ridge;
border-width:thin;
}

a.menu { display:block; margin-bottom:5px; text-align:center; width:180px;
border-style:ridge; border-width:3px; padding:2px; text-decoration:none; }

a.menu:link { color:#FFF; background-color:#666; }
a.menu:visited { color:#FFF; background-color:#666; }
a.menu:hover { color:#FFF; background-color:#333; }
a.menu:active { color:#FFF; background-color:#666; }

Und das ist die HTML:

<body>

<div class="top"> </div>

<div class="content">
<div class="menu">Menü</div>
<div class="inhalt">
<p>Inhalt

</p>
<p> </p>
</div>
<div class="rechts">technische Informationen (rechts)</div>
<div class="impressum">Impressum</div>
<div class="links">Zusatzinformation (links)</div>
</div>

<div class="versand">Versand
</div>

</body>

Das Problem besteht nun darin, dass sich das Impressum nach untern verschiebt, wenn der Inhalt wächst und nicht, wie ich gerne hätte, 20px unter dem Menü bleibt.
Außerdem wächst der Content nicht mit. Wenn ich ihm eine feste Höhe zuweise, liegt er zwar dahinter, aber ich müsste ihn für jeden Inhalt ensprechend anpassen. Und das kann ja irgenwie nicht Sinn der Sache sein.

Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
Arbeite leider noch nicht so lange mit CSS und dies ist das erste mal, dass ich mit Float und Clear arbeite.

Hier mal ein Screenshot:

Gruß
Sebastian

backlash86 · #2 (**permalink**) 24.02.2010, 15:10

Also das erste Problem habe ich gelöst, in dem ich um die 3 linken Elemente einen Container gezogen habe, neben dem der Inhalt jetzt rechts is. Dadurch wird nichts mehr verschoben.

Allerdings wächst der Content einfach nicht mit, so dass das unterste Element direkt under dem Banner anzeigt wird.

fablab · #3 (**permalink**) 24.02.2010, 15:31

bin mir nicht sicher ob ich dein problem verstanden hab, aber wenn du die height einfach mit 100% angibst anstatt mit ner pixelangabe..?

backlash86 · #4 (**permalink**) 24.02.2010, 15:58

Dann streckt sich der unterste Container vom Banner bis unter den längsten Inhalt.
Also auch nicht so wie es sein sollte.

Ich denke irgendwo habe ich einfach einen Denkfehler...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten	mazzo	CSS	10	05.04.2012 18:32
2 Div Container, unten anordnen, keine feste Höhe	Hausmeista	CSS	8	07.06.2006 13:44
2 Div Container, unten anordnen, keine feste Höhe	Hausmeista	(X)HTML	0	06.06.2006 18:28
Holy Grail und der Internet Explorer!	ONeill	CSS	23	01.06.2006 19:20
Links unterschiedlich darstellen	NEOX	CSS	11	22.06.2005 11:20