How to prevent floating divs from folding? - html

Question

Please don't tear me a new one because this question has been asked before, but their solutions are not working.
Question: How can I prevent two floating div's from wrapping?
Here is my webpage: Defining Voice Page
At the top I have two div's, one for the logo (float-left) and one for the site nav. (float-right). The parent div has a fixed width of 930px. What I want is for the left and right div's to appear inline on opposite sides of the 930px with and remain fixed in place when the window size changes.
The problem: when you resize the window the nav. panel moves and folds/wraps.
I've tried:
1) Setting the parent div to a fixed width (930px).
2) Setting the right and left div's as 'inline'.
3) Setting the right and left div's width to 50%.
...none of those works to fix the location of these div's.
Can someone tell me the right combination of the above or is there something else going on here?
Thanks in advance,
John

Answer 1

Add min-width and change the display property when it reach on 850px size. At present it is like this.
header .float-left, header .float-right
{
float:none;
}
Solution 1: If you want to keep the float:none property Use like below.
#media only screen and (max-width: 850px){
header .float-left, header .float-right
{
float:none;
min-width:425px;
display:table-cell;
}
}
Solution 2: If there is NO problem to remove this float then just remove it like below.
#media only screen and (max-width: 850px){
header .float-left, header .float-right
{
}
}