White-Space: Nowrap float issue - html

Question

I have what is hopefully a simple problem that I'm just overcomplicating in my mind.
Here is a Fiddle to demonstrate my issue.
In the Fiddle above you will see a flyout menu setup. On the top option you will see an enlarged first option that has a broken float. This is where my issue is. I need those elements to float alongside each other without breaking the list container holding them.
I understand that the white-space:nowrap is causing the break of that containers space, however, whenever I try and remove that element I can't seem to get my float to honor. I'm sure this is a simple miss on my part due to thinking of things that will be surrounding it, but any advancement on this is appreciated and hopefully an easy up for someone.
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
#nav{margin:0;padding:0;position:relative;float:left;}
#nav li {list-style:none;}
#nav a {
color:#fff;
display:block;
line-height:2.4;
padding:0 1em;
text-decoration:none;
border-bottom:1px solid #eee;
}
/* FLYOUT */
.sub {
top:0;
margin:0;
padding:0;
left:100%;
display:none;
min-height:100%;
position:absolute;
white-space:nowrap;
border-left:2px solid #eee;
}
#nav li:hover .sub {
display:block;
}
#nav li:hover .sub .sub {
display:none;
}
#nav .sub li:hover .sub{
display:block;
}
.sub a:hover {
color:#fff;
background:#333;
}
.sub img { min-width:120px; float:left; }
.sub .content { float:left; }
/*-- COLORS NOT NEEDED ON LIVE--*/
.first{background:#aaa;}
.second {background:#bbb;}
.third {background:#ccc;}
.fourth {background:#ddd;}
.fifth {background:#aaa;}
.sixth {background:#bbb;}
.seventh {background:#ccc;}
.eighth {background:#ddd;}
.nineth {background:#aaa;}
.tenth {background:#bbb;}
.all {background:#000}
<div id="nav">
<li><a class="first" href="#">Level 1 Option</a>
<ul class="sub first">
<li class="clearfix"><a href="#">
<div class="float">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9780&w=120&h=80" alt=""></div>
<div class="">
<h5>This will be a title</h5>
<p>
<strong>Sub-title</strong><br>
Specs<br>
<strong>Sub-title</strong><br>
Specs
</p>
</div>
</a>
<ul class="sub first">
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
</ul>
</li>
<li>Option 2
<ul class="sub first">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</li>
<li><a class="second" href="#">Level 1 Option</a>
<ul class="sub second">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="third" href="#">Level 1 Option</a>
<ul class="sub third">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fourth" href="#">Level 1 Option</a>
<ul class="sub fourth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fifth" href="#">Level 1 Option</a>
<ul class="sub fifth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="sixth" href="#">Level 1 Option</a>
<ul class="sub sixth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="seventh" href="#">Level 1 Option</a>
<ul class="sub seventh">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="eighth" href="#">Light Duty</a>
<ul class="sub eighth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="ninth" href="#">Level 1 Option</a>
<ul class="sub ninth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="tenth" href="#">Level 1 Option</a>
<ul class="sub tenth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="all" href="#">View All</a>
</li>
</div>

Answer 1

Remove the float left form the image within float div. And add some margin over there.
CSS:
.sub img {
min-width: 120px;
/* float: left; */ //Remove this line
margin-top: 10px;
}

Answer 2

See this fiddle.
One way to acheive your desired layout is to set inline-block for both the image container, and the container for the headings/sub headings.
vertical-align: top; is necessary to ensure the two containers align at their top edges.
For the sake of simplicity, I kept your existing float class. (Note that this class needed to be added to the container for the heading/sub-heading/specs.)
.float {
display: inline-block;
vertical-align: top;
}

Answer 3

Please check this code , i think you are looking for this, you dont need to set width to .sub i have added new division and add some property
.float , .inline-block {
display:inline-block;
vertical-align:top;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
#nav {
margin: 0;
padding: 0;
position: relative;
float: left;
}
#nav li {
list-style: none;
}
#nav a {
color: #fff;
display: block;
line-height: 2.4;
padding: 0 1em;
text-decoration: none;
border-bottom: 1px solid #eee;
}
/* FLYOUT */
.sub {
top: 0;
margin: 0;
padding: 0;
left: 100%;
display: none;
min-height: 100%;
position: absolute;
white-space: nowrap;
border-left: 2px solid #eee;
}
#nav li:hover .sub {
display: block;
}
#nav li:hover .sub .sub {
display: none;
}
#nav .sub li:hover .sub {
display: block;
}
.sub a:hover {
color: #fff;
background: #333;
}
.sub img {
min-width: 120px;
float: left;
}
.sub .content {
float: left;
}
/*-- COLORS NOT NEEDED ON LIVE--*/
.first {
background: #aaa;
}
.second {
background: #bbb;
}
.third {
background: #ccc;
}
.fourth {
background: #ddd;
}
.fifth {
background: #aaa;
}
.sixth {
background: #bbb;
}
.seventh {
background: #ccc;
}
.eighth {
background: #ddd;
}
.nineth {
background: #aaa;
}
.tenth {
background: #bbb;
}
.all {
background: #000
}
.float , .inline-block {
display:inline-block;
vertical-align:top;
}
<div id="nav">
<li><a class="first" href="#">Level 1 Option</a>
<ul class="sub first">
<li class="clearfix"><a href="#">
<div class="float"> <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9780&w=120&h=80" alt=""></div>
<div class="inline-block"><h5>This will be a title</h5></div>
<div class="">
<p> <strong>Sub-title</strong><br>
Specs<br>
<strong>Sub-title</strong><br>
Specs </p>
</div>
</a>
<ul class="sub first">
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
<li>Option 1</li>
</ul>
</li>
<li>Option 2
<ul class="sub first">
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</li>
<li><a class="second" href="#">Level 1 Option</a>
<ul class="sub second">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="third" href="#">Level 1 Option</a>
<ul class="sub third">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fourth" href="#">Level 1 Option</a>
<ul class="sub fourth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="fifth" href="#">Level 1 Option</a>
<ul class="sub fifth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="sixth" href="#">Level 1 Option</a>
<ul class="sub sixth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="seventh" href="#">Level 1 Option</a>
<ul class="sub seventh">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="eighth" href="#">Light Duty</a>
<ul class="sub eighth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="ninth" href="#">Level 1 Option</a>
<ul class="sub ninth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="tenth" href="#">Level 1 Option</a>
<ul class="sub tenth">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li><a class="all" href="#">View All</a> </li>
</div>