nicht angemeldet
2 container verschachtelt gleiche Höhe (auto)
Hallo,
ich habe einen Container in einem Anderen liegen. Der Äussere hat eine Breite von 100% und der inner hat eine Breite von 1150px und ist zentriert.
In den inneren Container wird der Inhalt ausgegeben, dies funktioniert auch aber der Äussere Container (da ist ein HG-Bild drinnen) passt sich nicht automatisch an.
<div id="content-full">
<div id="center">
<div id="content">###JCB-CONTENT###
<div id="image">###JCB-IMAGE###</div>
</div>
</div>
</div>
~~~~~~css
#content-full{
height:auto;
background-color:#fafbfc;
width:100%;
background-image: url(../img/bg-bottom.jpg);
background-position:bottom;
background-repeat:repeat-x;
border-bottom:5px solid #f8ae25;
}
#content{
height:auto;
padding: 10px 100px 150px 100px;
}
#center{
width: 1150px;
margin: auto;
position: absolute;
left: 50%;
margin-left: -575px;
}
-
ich habe einen Container in einem Anderen liegen. Der Äussere hat eine Breite von 100% und der inner hat eine Breite von 1150px und ist zentriert.
In den inneren Container wird der Inhalt ausgegeben, dies funktioniert auch aber der Äussere Container (da ist ein HG-Bild drinnen) passt sich nicht automatisch an.An was soll er sich denn anpassen? Er ist 100% breit - das bezieht sich auf die Breite seines Elternelements - aufgrund der Voreinstellung (overflow: visible) läuft sein Kind drüber hinaus, wenn der Viewport schmäler sein sollte.
Was du suchst ist ggf. ein overflow: hidden oder min-width - ich bin jetzt aber nicht ganz sicher, was du eigentlich vor hast.
-
Der äussere Container soll sich variabel mit seiner Höhe an den Inneren anpassen.
Z.z. ist der Äussere sehr schmal und der Inner wächst darüber hinaus.Hoffe ich habe mich diesesmal verständlich ausgedrückt :)
-
Hoffe ich habe mich diesesmal verständlich ausgedrückt :)
Ich hab jetzt immer noch nicht verstanden ob du höhe oder breite meinst.
Du schreibst "Höhe" verwendest aber gleichzeitig "schmal" wobei letzteres ein Begriff für die Breite ist - ein analoger Begriff für die Höhe wäre "flach".
Ggf. stehe ich aber auf der Leitung und ChrisB hat mit Faux Colums völlig recht.
-
Ich meinte flach, sorry etwas unverständlich geschrieben.
-
Ich meinte flach, sorry etwas unverständlich geschrieben.
Dann ist Faux Columns die richtige Antwort.
-
-
-
-
-
Hi,
das ist absolut keine neue Fragestellung – sondern total im Gegenteil.
http://www.google.com/search?q=css+zwei+spalten+gleiche+höhe,
http://www.google.com/search?q=css+equal+height+columns,
http://www.google.com/search?q=faux+columnsMfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Hallo!
ich habe einen Container in einem Anderen liegen.
Genaugenommen sogar drei ...
Der Äussere
(Anmerkung des Autors: der mit der ID 'content-full')
hat eine Breite von 100% und der innere
(Anmerkung des Autors: der mit der ID 'center')
hat eine Breite von 1150px und ist zentriert.
In den inneren Container(Anmerkung des Autors: der mit der ID 'center')
wird der Inhalt ausgegeben, dies funktioniert auch aber der Äussere Container
(Anmerkung des Autors: der mit der ID 'content-full')
(da ist ein HG-Bild drinnen) passt sich nicht automatisch an.
Wie sollte er auch, da "der Innere", also der mit der ID 'center' ja per 'position: absolute;' aus dem "normalen" Fluss genommen wird.
Da du das "anscheinend" nur aus dem Grund gemacht hast, um ihn (horizontal) zu zentrieren, kannst du darauf aber schon mal verzichten. Um Blocklevel-Elemente horizontal zu zentrieren reicht ja ein 'margin: 0 auto;' völlig aus.Verwirrend bleibt, was du jetzt genau mit "passt sich nicht automatisch an" meinst?
Also bitte nochmal etwas präziser erläutern (die genannten Links in den anderen Beiträgen könnten dabei möglicherweise hilfreich sein).Gruß Gunther