Liquid title collides with navigation bar in html - css

Question

I am new to html & css. I made a title and a nav bar on the same height but when I make my browser window smaller(liquid) the title and the nav bar collide. How can I fix this?
This is my css code for the title and nav. bar:
/*title*/
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}
/* nav. bar */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
/* text*/
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
And this is the html code:
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li><a href="../html/index.html"id="homenav" >Home</a></li>
<li><a href="../html/kleding.html"id="kledingnav" >Kleding</a></li>
<li>Bestellen</li>
<li>Contact</li>
<li>Vragen</li>
</ul>
</div>
Thanks in advance.

Answer 1

What I suggest is giving your logo an absolute position, and floating the nav over it, with a left margin that's the same as the width of your logo.
Example here :
http://codepen.io/anon/pen/uvAaJ
If you can expand your question with the behavior you're looking for it would help... as there are so many ways to handle this situation depending on what you want (absolute + margin, media queries, box-sizing:border-box...).