CodePen

HTML

            
              <div class="wrapper">
  <!--trail1div-->
  <div class="trail1div">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About this domain</a></li>
        <li><a href="#">Products &amp; Services</a></li>
        <li><a href="#">News &amp; Events</a></li>
     </ul>
    
    <div class="testdivright">
    
    </div>
  </div>
   <!--trail1div-->
</div>
            
          
!

CSS

            
              
.wrapper{width:980px; margin:0 auto; font-family:arial; font-size:11px; color:#000; text-align:left;}
.trail1div{margin:0 0 20px 0; background:#dddc1a;}
.testdivright{float:right; height:300px; width:300px; background:#d2104b;}
.trail1div ul{margin:0; padding:0; display:block; width:600px; list-style:none; background:#272822; float:left;}
.trail1div ul li{float:left; display:block; border-right:1px solid #0c0c0a;}
.trail1div ul li a{display:block; padding:10px 25px; font-family:Arial; font-size:12px; color:#fff; text-align:center; outline:none; text-decoration:none; border-right:1px solid #31332b;}
.trail1div ul li:hover{background:#3b3d34;}
/*my trial */
.trail1div ul:after {
      clear: both;
      content: '';
      display: block;
  }

.trail1div:after {
      clear: both;
      content: '';
      display: block;
  }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................