CSS - Div does not stay separated from another div - html

Question

I am a CSS newbie, maybe you laugh about my problem...
I have 2 main DIVs ("topinfo" and "navigat"), and I need them to stay separated, one after other, but for some reason they don't.
Running code on Fiddle: https://jsfiddle.net/7mgfrhq6/
Here is the HTML code:
<div id="topinfo">
<div id="infowin">
<div id="computer">
<b>Computer:</b> 123456789012345 (192.168.560.000)
<img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
</div>
</div>
<div id="statbtn">
<a href="stats.htm" target="_blank">
<img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
</a>
</div>
</div>
<div class="navigat">
« First
« Prior
<select class="navsel" onchange="self.location.href=options[selectedIndex].value">
<option selected="selected">Page 001</option>
<option value="pag002.htm">Page 002</option>
<option value="pag003.htm">Page 003</option>
<option value="pag004.htm">Page 004</option>
<option value="pag005.htm">Page 005</option>
</select>
Next »
Last »
</div>
Here is the CSS code:
#topinfo {
width: 420px;
margin: 16px auto 4px auto;
}
#topinfo #infowin {
float: left;
width: 380px;
border: 1px dotted #292929;
border-radius: 4px;
background-color: #FFFFE8;
}
#topinfo #infowin #computer {
padding: 6px;
font-family: Verdana, Tahoma, Helvetica;
font-size: 10pt;
text-align: center;
}
#topinfo #statbtn {
float: right;
width:32px;
height:32px;
border: 0;
}
.navigat {
width: 600px;
margin: 18px auto 14px auto;
font-family: Tahoma, Verdana, Helvetica;
text-align: center;
}
.navigat a.navbtn {
display: inline-block;
width:70px;
padding: 3px 3px 4px 3px;
margin: 3px;
font-size: 9pt;
color: #FFFFFF;
text-align: center;
text-decoration: none;
background-color: #1D63C8;
border-radius: 10px;
cursor: pointer;
}
.navigat select.navsel {
display: inline-block;
width:100px;
padding:3px;
margin: 3px;
font-size: 9pt;
line-height: 1;
cursor: pointer;
}
Here is what I got:
And here is what I really need:
Thanks for any help!

Answer 1

You need to clear the floats above when you get to .navigat and then add a bit of padding to get the desired spacing.
.navigat {
clear: both;
padding-top: 18px;
}
Recommended reading: Chris Coyier, All About Floats

Answer 2

This happens because of your float, you can solve this by adding an empty div in between "topinfo" and "navigat" with clear:both
HTML:
<div id="topinfo">
<div id="infowin">
<div id="computer">
<b>Computer:</b> 123456789012345 (192.168.560.000)
<img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
</div>
</div>
<div id="statbtn">
<a href="stats.htm" target="_blank">
<img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
</a>
</div>
</div>
<div class="clear"></div>
<div class="navigat">
« First
« Prior
<select class="navsel" onchange="self.location.href=options[selectedIndex].value">
<option selected="selected">Page 001</option>
<option value="pag002.htm">Page 002</option>
<option value="pag003.htm">Page 003</option>
<option value="pag004.htm">Page 004</option>
<option value="pag005.htm">Page 005</option>
</select>
Next »
Last »
</div>
CSS:
.clear
{
clear:both;
}
DEMO

Answer 3

This is happending because of the floats that you are using to align the div of #topinfo.
What you can do is make the inside as display:inline-block. So this will be something like this..
#topinfo #infowin {
display:inline-block
width: 380px;
border: 1px dotted #292929;
border-radius: 4px;
background-color: #FFFFE8;
}
#topinfo #statbtn {
display:inline-block;
width:32px;
height:32px;
border: 0;
vertical-align: bottom;
}
If you want to use floats you can use clear:both on .navigat class.