Container Höhe ist weniger als der Inhalt

Question

Ich möchte die schwarze feste Grenze der Klasse logo1 nach rosa platziert werden, aber es wird nach blau, die die Farbe des Containers ist platziert. Welche Veränderungen muss ich machen?

.menu-wrap { 
 
    background-color: blue; 
 
    height: 50px; 
 
    padding: 30px 0 0 20px; 
 
} 
 
.menu { 
 
    background-color: pink; 
 
    overflow: hidden; 
 
    width: 700px; 
 
    height: 75px; 
 
} 
 
.logo1 { 
 
    height: 100px; 
 
    border: solid; 
 
}

<div class="menu-wrap"> 
 
    <ul class="menu"> 
 
    </ul> 
 
</div> 
 
<div class="logo1"> 
 
</div>

Answer 1

EDIT - - - - -

Jsfiddle

Wie gewünscht, dasselbe Ergebnis, aber die Platzierung des dritten Div wie erforderlich bearbeitet.

Es ist ein wenig hacky mit den Positionierungswerten, wenn Sie ein div anstelle eines UL für das Menü verwenden und alles in ein containing div umhüllen, können Sie die Dinge viel aufgeräumter positionieren.

Für jetzt, hier ist, wie ich arbeite mit dem Layout, das Sie angegeben haben.

HTML

<div class="menu-wrap"> 
    <ul class="menu"> 
    </ul> 
</div> 

<div class="logo1"> 
</div> 

CSS

.menu-wrap { 
    background-color: blue; 
    height: 50px; 
    padding: 30px 0 0 20px; 
} 

.menu { 
    background-color: pink; 
    width: 700px; 
    height: 75px; 
} 

.logo1 { 
    width: 735px; 
    height: 100px; 
    border: solid; 
    position: absolute; 
    top: 128px; 
    left: 28px; 
} 

OLD ANTWORT - - - - -

Jsfiddle

Ich bin nicht ganz sicher, was du meinst, ich gehackt etwas zusammen schnell zu sehen Wenn dies das Ziel ist, das Sie im Sinn haben.

HTML

<div class="menu-wrap"> 
    <ul class="menu"> 
    </ul> 
    <div class="logo1"> 
</div> 
</div> 

CSS

.menu-wrap { 
    background-color: blue; 
    height: 50px; 
    padding: 30px 0 0 20px; 
} 
.menu { 
    background-color: pink; 
    width: 700px; 
    height: 75px; 
} 
.logo1 { 
    width: 737px; 
    height: 100px; 
    border: solid; 
    margin: -18px 0; 
} 

Answer 2

.menu-wrap { 
 
    background-color: blue; 
 
    height: 50px; 
 
    padding: 30px 0 0 20px; 
 
} 
 
.menu { 
 
    background-color: pink; 
 
    overflow: hidden; 
 
    width: 700px; 
 
    height: 75px; 
 
} 
 
.logo1 { 
 
    height: 100px; 
 
    border: solid; 
 
}

<div class="menu-wrap"> 
 
    <ul class="menu"> 
 
    </ul> 
 
<div class="logo1"> 
 
</div> 
 
</div>