Make a div containing img take full height

Question

This question have been asked a lot on the web. But each try don't suceed

For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).

Here is the HTML I use:

<div id="topbar">
    <div id="networking">
        <div id="title">
            EasyMusik
        </div>
        <div id="logo">
            <img src="{% static "img/icons/myzik.svg" %}" />
        </div>
    </div>
</div>

And here is the CSS:

#topbar{
    display:block;
    background-color : #29A329;
    position: relative;
    float: top;
}
#tobbar div{
    height: 100%;
    display:inline-block;
}
#networking{
    padding-left:25%;
}
#networking div{
    display:inline-block;
}
#title{
    position: relative;
    height:100%;
    font-size: 24px;
}
#logo img{
    width:100%;
    display:block;
    float:left;
}
#logo{
    position: relative;
    height: 100%;
    padding-left:15px;
    background-color : #FF0000;
}

And I got this result

I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?

EDIT: Finally managed to get a fiddle: Fiddle here

Answer 1

This did the worked for me. Though its not your CSS.

CSS:

.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}

HTML:

<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>