Problem mit verschachtelten div-Boxen

[mingorius]

Hallo,

ich habe ein Problem mit der Verschachtelung von mehreren div-Boxen.

Der CSS-Code sieht so aus:

#content
   {
     width: 100%;
     height: auto;
     background-color: #D8D8D8;
     border-bottom:   2px groove #FF0000;
   }  

   #contentbox
   {
     width: 920px;
     min-height: auto;
     margin-left: auto;
     margin-right: auto;
     background-color: #FF6633;
   }    

   #contentleft
   {
     width: 307px;
     height: 500px;
     float: left;
     background-color: #FF6CCC;
   }

   #contentright
   {
     width: 613px;
     height: 500px;
     background-color: #336CCC;
     float: right;
     position: relative;
   }

Der html-Code sinngemäß so:

<div id="content">
<div id="contentbox">
<div id="contentleft"></div>
<div id="contentright"></div>
</div>
</div>

Bei der Darstellung verschwindet contentbox...

Kann mir jemand helfen?

Vielen Dank

 

[wolf32]

Deinem div contentbox hast du min-height=AUTO; zugewiesen - solange die box keinen Inhalt hat nimmt auto den Wert 0 an

 

[Difool]

Alternativ könntest du der #contentbox ein "display:flex;" verpassen –
nur ob das so gewollt sein sollte, sei mal dahingestellt.
Ansonsten hat User wolf32 es, über meinem Post, ja bereits angemerkt.

 

[primelinus]

wieso eigentlich ids? warum keine klassen?

 

[Kirzz]

.wrapper {
background-color: #D8D8D8;
border-bottom: 2px groove #FF0000;
}

.wrapper {
    content: "";
    display: table;
    width: 100%;
    margin: 0 auto;
    position: relative;
    }

.wrapper:before, .wrapper:after {
    clear: both;
    }

.contentbox {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    position: relative;
}

.contentleft
{
    width: 35%;
    height: 500px;
    background-color: #FF6CCC;
    float: left;
    position: relative;
}

.contentright {
    width: 65%;
    height: 500px;
    background-color: #336CCC;
    float: left;
    position: relative;
}

.clear {
    clear: both;
}


<div class="wrapper">
    <div class="contentbox">
        <div class="contentleft"></div>
        <div class="contentright"></div>
        <div class="clear"></div>
    </div>
</div>

ID = Nutzung einmalig
class = Nutzung mehrfach

PS: ungetestet