TechQA.

White-Space: Nowrap float issue

1.9k views Asked by At

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><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
              <li><a href="#">Option 1</a></li>
            </ul>  
          </li>
          <li><a href="#">Option 2</a>
            <ul class="sub first">   
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
              <li><a href="#">Option 2</a></li>
            </ul>  
          </li>
      </ul>
      </li>
    <li><a class="second" href="#">Level 1 Option</a>
      <ul class="sub second">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
      </ul>
    </li>
    <li><a class="third" href="#">Level 1 Option</a>
      <ul class="sub third">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
      </ul>
    </li>
    <li><a class="fourth" href="#">Level 1 Option</a>
      <ul class="sub fourth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="fifth" href="#">Level 1 Option</a>
      <ul class="sub fifth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="sixth" href="#">Level 1 Option</a>
      <ul class="sub sixth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="seventh" href="#">Level 1 Option</a>
      <ul class="sub seventh">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="eighth" href="#">Light Duty</a>
      <ul class="sub eighth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="ninth" href="#">Level 1 Option</a>
      <ul class="sub ninth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="tenth" href="#">Level 1 Option</a>
      <ul class="sub tenth">   
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>        
      </ul>
    </li>
    <li><a class="all" href="#">View All</a>
    </li>
</div>

html css flyout
Original Q&A
3

There are 3 answers

0
Turi S. On BEST ANSWER

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;
}
3
Taniya On

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;
}
2
Jishnu V S On

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><a href="#">Option 1</a></li>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 1</a></li>
        </ul>
      </li>
      <li><a href="#">Option 2</a>
        <ul class="sub first">
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a class="second" href="#">Level 1 Option</a>
    <ul class="sub second">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="third" href="#">Level 1 Option</a>
    <ul class="sub third">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="fourth" href="#">Level 1 Option</a>
    <ul class="sub fourth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="fifth" href="#">Level 1 Option</a>
    <ul class="sub fifth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="sixth" href="#">Level 1 Option</a>
    <ul class="sub sixth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="seventh" href="#">Level 1 Option</a>
    <ul class="sub seventh">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="eighth" href="#">Light Duty</a>
    <ul class="sub eighth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="ninth" href="#">Level 1 Option</a>
    <ul class="sub ninth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="tenth" href="#">Level 1 Option</a>
    <ul class="sub tenth">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a class="all" href="#">View All</a> </li>
</div>

Related Questions in HTML

Related Questions in CSS

Related Questions in FLYOUT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions