Question

How to move border-bottom border-bottom: 1px solid #E5E5E5; further down without specifying the height of <li> (.content-intro-full-right ul li)

In the <li> (.content-intro-full-right ul li) – it contain <ul> of operating systems.

For example: http://jsfiddle.net/t6gB7/12/

You can see border-bottom should appear below of operating system list.

<div class="content-intro-full-right">    
<ul>   
  <li>
     <ul class="operating-system">
        <li>Fedora</li>
        <li>ArchLinux</li>
        <li>FreePBX</li>
      </ul>
     <ul class="operating-system" style="margin-right: 140px;">
       <li>CentOS</li>
       <li>Ubuanto</li>
       <li>Debian</li>
       <li>Gentoo</li>
       <li>Slackware</li>
     </ul>
     <h4>Operating Systems</h4>
     <p>
      We offer a variety of Linux operating systems.
    </p>
  </li>
</ul>
</div>
​

.content-intro-full-right ul li {
    position: relative;
    padding: 30px 280px 20px 0;
    border-bottom: 1px solid #E5E5E5;
}

ul.operating-system  {
    position: absolute;
    top: 30px;
    right: 0;
}

ul.operating-system li, ul.operating-system li:nth-child(even) {
    border:none;
    padding: 7px;
    width: 80px;
    border-bottom: 1px solid #dedede;
    color:#808080;
    background-color: #f7f7f7;
    padding-left: 30px;
}

ul.operating-system li:last-child {
    border-bottom: none;
}

Answer 1

You can float the uls to the right and add a div with clear: both to force the border down. I’ve demonstrated in this fiddle, although I messed up the spacing around the list of OSes and I left in some colored borders to show the boundaries of the elements.

http://jsfiddle.net/t6gB7/19/