Logo image overflow into content - html

Question

Hello I'm currently working on a website where I want the logo of the business to overlap into the content.
Similar to this website: http://www.menzies.com.au/
I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach
Example Code of what i've tried
<div class="container">
<ul class="nav nav-pills">
<img src="logo.jpg" style="float: left; z-index: 3;">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Home</li>
</ul>
<img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>
What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary
Could anyone with experience in doing this point me in the right direction?

Answer 1

Basically what you need do is set the logo position to absolute, then it will be over the other elements. I did a example to you, look at this HTML:
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
The menu div has 75px of height, but his child can have more than this, and if they do, a overflow will occur, that is what you wanna. If it doesn't occur, as I said, you can try set the position to absolute. So, you set the logo div to something like 130px of height, and the nav to 100% height. I changed the height of logo to 130px, but it doesn't affect the other menu child. So, the nav height will be the menu height: 75px. Complete code:
#menu {
width:100%;
height:75px;
background-color:#333;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
}
.logo {
width:150px;
height:130px;
background-image:url('http://placehold.it/150x130');
float:left;
position:absolute;
margin-left:25px;
}
nav {
color:#fff;
float:right;
font-size:1.3em;
line-height:75px;
margin-right:10px;
height:100%;
}
nav ul {
margin-top: 0px;
}
nav ul li {
margin-right:10px;
}
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
This problem is very relative, but with a simple CSS like this one, you can contour this.