div inline-block (div overflows when there's content inside)

Question

I don't know if the title is describing it correctly but anyway; in this jsfiddle I have a div containing two inline-block divs ..they are aligned with no problem .. but whenever there's content in the yellow div this div strangely overflows .. check this out I want to know why is that and how to fix it

html:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<div class="header">
<div class="logo-container">
    <p class="logo"><span class="seven">7</span>asobate</p>
    <span class="slogan">Web Developer and Data Scraper</span>
  </div><div class="header-nav-container">
 </div>
</div>

css :

*
{
  margin:0;
}
.header
{
  width:100%;
  height:65px;
  background-color:gray;

}
.logo-container
{

  display:inline-block;
  position:relative;
  background-color:green;
  height:65px;
  width:22.5%;
  padding-left:1%;


}
.logo-container .logo
{
  position:absolute;
 font-size:30px;
  font-family: 'Black Ops One';
}
.logo-container .logo .seven 
{
  color:blue;
  font-size:40px;
}
 .logo-container .slogan
{
  position:absolute;
  margin-top:40px;
  font-size:12.5px;
  font-family:'Black Ops One';
}
.header-nav-container
{
  margin-left:70px;
  display:inline-block;
  background-color:yellow;
  height:65px;
  width:10%;
}

(psst .. do you think it's fully legal to address myself as data scraper ?)

score 0 · Answer 1 · answered Apr 25 '16 at 10:50

Well i am sorry i am not sure why its happens but the solution is using vertical-align: top

.header-nav-container
{
  margin-left:70px;
  display:inline-block;
  background-color:yellow;
  height:65px;
  width:10%;
  vertical-align: top;
}

Example : https://jsfiddle.net/omy1p00y/5/

div inline-block (div overflows when there's content inside)

1 Answers1