Autor |
Nachricht |
melon
Threadersteller
Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 09.09.2011 14:51
Titel CSS Container vertikal unten bündig ausrichten |
|
|
Hi,
ich habe ein Hauptcontainer und rechts daneben 3 weitere untereinenader. Diese 3 variieren je nach Inhalt in der Höhe.
Wie schaffe ich es mittels CSS, dass der Hauptcontainer mit den 3 rechts daneben unten bündig ist?
Ich habe es mit faux columns versucht, aber das scheint in meinem fall nicht zu funktionieren.
|
|
|
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 09.09.2011 18:28
Titel
|
|
|
Das kannst du ganz einfach faken ohne großes überlege. Du legst einen Wrapper um den Hauptcontainer und die Sidebar und legst da eine Hintergrundgrafik fest, in deinem Beispiel in Grün und so breit wie dein Hauptcontainer und 1px hoch. Diese lässt du dann auf der y-Achse kacheln. Fertig.
|
|
|
|
|
Anzeige
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Sa 10.09.2011 01:19
Titel
|
|
|
Alternative: Warum keine Festhöhe? oder min-height?
|
|
|
|
|
melon
Threadersteller
Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 10.09.2011 21:12
Titel
|
|
|
wenn ich es per container um alle 4 mache und css...
.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
}
dann wiederholt sich die hintergrundgrafik nicht. ich stehe irgendwie auf dem schlauch. dabei ist es bestimmt einfach.
festhöhe kann ich nicht machen, denn die 3 container rechts variieren ja in der höhe je nach inhalt.
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Sa 10.09.2011 21:18
Titel
|
|
|
Das mit dem Hintergrund könnte daran liegen, dass deine Haupt- und Seitencontainer alle floaten? Dann könnte z.B. im .wrapper ein clear: both; helfen.
Ansonsten zeig doch mal auch den Code deiner Boxen, die du wrappst.
|
|
|
|
|
melon
Threadersteller
Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 10.09.2011 21:48
Titel
|
|
|
nee, zwar sind alle 4 container auf float (hauptcontainer left, die anderen 3 right), aber auch mit clear: both; keine änderung.
<div class="wrapper">
<div class="hauptcontainer">...</div>
<div class="rechts_1">..</div>
<div class="rechts_2">..</div>
<div class="rechts_3">..</div>
</div>
-------------------------------------------------------------
.wrapper {
background: url(../bilder/wrapper.png) repeat-y;
clear: both;
}
.hauptcontainer {
width: 580px;
background-color: #333;
display: inline;
float: left;
margin: 6px 0 0 6px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 20px 10px;
}
.rechts_1 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}
.rechts_2 {
width: 330px;
background-color: #333;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
position: relative;
}
.rechts_3 {
width: 330px;
background-color: #333;
clear: right;
float: right;
margin: 6px 6px 10px 0;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding: 10px 0 15px 10px;
}
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
melon
Threadersteller
Dabei seit: 09.09.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 10.09.2011 22:17
Titel
|
|
|
danke m, aber das habe ich schon gesehen. es funktioniert einfach nicht, in keinem browser.
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS Container 100% Vertikal ausrichten
container horizontal und vertikal ausrichten.
CSS: Container im Container Vertikal zentrieren
CSS: mittleren Container vertikal strecken
Dreamweaver - Horizontal und vertikal ausrichten
[css] list-style-image - vertikal ausrichten
|
|