CSS Box Modell

[Gast]

Hallo Leute,

ich hab zwar gesucht, aber dennoch keine wirkliche antwort gefunden. ich versuche gerade so ein wenig mit CSS zu experimentieren.

Doch ein Problem hat ich: Ich definieren eine Box, wo der Inhalt angezeigt werden soll. Wenn ich darin eine weitere box definieren, die auch content enthält, und deren größe dynamisch ist, wird der inhalt der inneren box über die äußere box hinweggeschrieben.

Wie kann ich die äußere Box so erstellen, das sie auf die innere reagiert, also sich mit vergrößert, wenn die innere sich ändert ?

mit overflow gehts irgendwie nicht so wirklich.

mfg
oaddy

[jahlives]

Ich definieren eine Box, wo der Inhalt angezeigt werden soll. Wenn ich darin eine weitere box definieren, die auch content enthält, und deren größe dynamisch ist, wird der inhalt der inneren box über die äußere box hinweggeschrieben.

Wenn du prozentuale Grössenangaben verwendest sollte dies eingentlich nicht passieren. Denn diese Grössen beziehen sich dann auf das Elternelement.

Gruss

tobi

[Gast]

hmm, also wie meinst du das - ich hab mal versucht das umzusetzen:

<!-- Elternbox -->

#contentbox {
background: #F7F7F7;
margin: 0px 0px 0px 0px;
padding: 1px 1px 1px 1px;
border-right: 2px solid #C0C0C0;
border-left: 1px solid #CCCCCC;
border-bottom: 2px solid #C0C0C0;
width: 800px;
height: 483px;
/* Zentrieren */
margin-left:auto;
margin-right:auto;
/* Text */
text-align: center;
}

<!-- Diese Boxen sind in der Elterbox platziert -->
#sidebar {
position: relative;
/*background: #F9F9F9;*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
border-left: 1px #F5F5F5 dotted;
width: 30%;
height: 100%;
float: right;
/*Ausrichtung Sidebar Box */
margin-left:auto;
margin-right: 0px;
/* Text */
text-align: left;
}

#maincontent {
position: relative;
/*background: #F9F9F9;*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-left: 1px #F5F5F5 dotted;
width: 70%;
float: left;
/*Ausrichtung Sidebar Box */
margin-left:0px;
margin-right: auto;
/* Text */
text-align: left;
}

Einbindung :

<div id="contentbox">
<div id="maincontent">
</div>
<div id="sidebar"><h1>Aktuelle Einträge</h1></div>
</div>

http://www.nodsl.de/fehler_css.gif

[wahsaga]

Re: CSS Box Modell

du benutzt float, offenbar ohne dir der konsequenzen bewusst zu sein - stichwort: entfernung aus dem elementfluss.

beschäftige dich mit clear.