Divs do not float properly - html

Question

I am just trying to float these 3 divs to the left, so that they are all in one line. But whenever I apply float left to the id=abkitchen, it just does not float. I think it's because I've got a fixed header at the top of the page. Any idea how to do so that they float properly? Thanks in advance.
HTML:
<div id="headnav">
<ul>
<li>The Act</li>
<li>Kitchen Act</li>
<li>Social Act</li>
</ul>
</div>
<div id="logo"><img src="images/logo.png"></div>
<div id="filters">
<div class="section" id="utensils">
<ul>
<li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
<li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
</ul>
</div>
<div class="section" id="food">
<ul>
<li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
<li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
</ul>
</div>
</div>
<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil, for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
CSS:
#headnav{
z-index:101;
position: absolute;
top: 0px;
height: 35px;
width: 100%;
background: #f9f9f9;
text-align: left;
font-size: 1em;
overflow: hidden;
padding: 0.35em 0.5%;
vertical-align: middle;
}
#headnav ul{
display:inline-block;
list-style-type:none;
margin:auto 0;
padding:8px;
}
#headnav li{
display:inline;
padding-right:10px;
margin-top:10px;
font-size: 14px;
}
#logo{
float:left;
padding:15px;
}
#abkitchen{
background-color: #E0E0E0;
padding:15px;
text-align: left;
width:50%;
}
#filters{
text-align: left;
padding:15px;
/*background-color: white;*/
}
#utensils, #food{
display: inline-block;
float:left;
width:auto;
height:auto;
background-color: yellow;
}
#utensils{
text-align: right;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
#food{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
margin-left: -5px;
}
li{
list-style-type: none;
}

Answer 1

First of all - you have a typo in #utensils, #food{, you need float:left;
Second of all, you need to set float property to ALL elements that you need to float.
Start simple, and make three divs that float, and work from there.
Next problems that you will encounter would be - your divs move down. You need to set the width for all of them, and then encapsulate them all in a bigger div. And after all of the floating divs, I personally put one empty div that just has clear: both; in it.
Observe:
<div style="width: 381px; border: 1px solid #000000;">
<div style="float: left; width: 125px; border: 1px solid #FF0000;">
I am RED!!!
</div>
<div style="float: left; width: 125px; border: 1px solid #00CC00;">
I am Green!!!
</div>
<div style="float: left; width: 125px; border: 1px solid #0000FF;">
I am Blue!!!
</div>
<div style="clear: both;"></div>
</div>
<div style="border: 1px solid #000000;">And my behaviour is completely unacceptable!</div>
This way you make sure the elements stay in place no matter how much you resize the window...

Answer 2

I think you should just add "clearfix".
Here's the HTML:
<div id="logo"><img src="images/logo.png"></div>
<div id="filters">
<div class="section" id="utensils">
<ul>
<li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
<li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
</ul>
</div>
<div class="section" id="food">
<ul>
<li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
<li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
</ul>
</div>
</div>
<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil, for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
<div class="clearfix"></div>
And the CSS code:
#logo{
float:left;
padding:15px;
}
#abkitchen{
background-color: #E0E0E0;
padding:15px;
text-align: left;
width:50%;
}
#filters{
text-align: left;
padding:15px;
/*background-color: white;*/
}
#utensils, #food{
display: inline-block;
float;left;
width:auto;
height:auto;
background-color: yellow;
}
#utensils{
text-align: right;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
#food{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
margin-left: -5px;
}
li{
list-style-type: none;
}
.clearfix{
clear: both;
}
I hope it works fine.

Answer 3

Try to be more specific when you say "three divs"...
Anyway, i suggest you start by adding your divs with minimum content and some basic CSS. When this works, start adding content and more CSS.
HTML
<div id="logo">
<p>this is logo</p>
</div>
<div id="filters">
<p>this is filters</p>
</div>
<div id="abkitchen">
<p>this is abkitchen</p>
</div>
CSS:
#logo,
#filters,
#abkitchen {
float: left;
padding: 20px;
border: 1px solid #eee;
}