Q:

ul/li items not displaying correctly in a div

i have this code css code, i am trying to display the HTML (below) inside another div
/* EXTENDED FEATURES */
.four-col {
    float:left;
    width:25%;
}
.four-col h3{
    font-size:17px;
}
.four-col ul{
    margin:10px 0 10px -10px;
    list-style-image:url(../images/icon_tick1.png);
}
.four-col li{
    font-weight:bold;
    padding:1px 0;

<div class="four-col">
                            <h3>Account Features</h3>
                            <ul>
                                 <li>Unlimited MySQL 5 Databases</li>
                                 <li>Unlimited FTP Accounts</li>
                                 <li>SSH</li>
                                 <li>PHP 5.3, 5.4 & 5.5</li>
                                 <li>PEAR</li>
                                 <li>Zend Guard Loader</li>
                                 <li>Ioncube Loader</li>
                                 <li>Ruby On Rails</li>
                                 <li>Perl</li>
                                 <li>CGI</li>
                                 <li>Python</li>
                                 <li>Server Side Includes</li>
                                 <li>cURL</li>
                                 <li>GD2</li>
                            </ul>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <ul>
                                 <li>Cron Jobs</li>
                                 <li>ImageMagick</li>
                                 <li>Zend Framework</li>
                                 <li>FFmpeg</li>
                                 <li>Flv2tools</li>
                                 <li>LAME MP3 Encoder</li>
                                 <li>Libogg &#38; Libvorbis</li>
                                 <li>Mplayer &#38; Mencoder</li>
                            </ul>
                            <h3>Control Panel Features</h3>
                            <ul>
                                 <li>Latest cPanel</li>
                                 <li>Softaculous</li>
                                 <li>RVSiteBuilder Pro</li>
                                 <li>R1Soft CDP Backups</li>
                                 <li>CloudFlare CDN Plugin</li>
                                 <li>Custom Error Pages</li>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <ul>
                                 <li>IP Deny Manager</li>
                                 <li>Hotlink Protection</li>
                                 <li>Password Protect Directories</li>
                                 <li>Redirects</li>
                                 <li>phpMyAdmin</li>
                            </ul>
                            <h3>Email Features</h3>
                            <ul>
                                 <li>Unlimited POP3 Accounts</li>
                                 <li>Unlimited Auto Responders</li>
                                 <li>Unlimited E-Mail Forwarders</li>
                                 <li>Web Mail</li>
                                 <li>Mailing Lists</li>
                                 <li>Spam Assassin</li>
                                 <li>SMTP</li>
                                 <li>IMAP</li>
                                 <li>SPF &#38; DomainKeys</li>
                            </ul>
                        </div><!-- four-col -->
                        <div class="four-col">
                            <h3>Domains &#38; IP Addresses</h3>
                            <ul>
                                 <li>Unlimited Sub Domains</li>
                                 <li>Unlimited Add-On Domains</li>
                                 <li>Unlimited Parked Domains</li>
                                 <li>Dedicated IP ($1.95/mo)</li>
                            </ul>
                            <h3>Web Reports &#38; Statistics</h3>
                            <ul>
                                 <li>Awstats</li>
                                 <li>Webalizer</li>
                                 <li>Logaholic</li>
                                 <li>Access Logs</li>
                                 <li>Error Logs</li>
                                 <li>Bandwidth Usage</li>
                                 <li>Diskspace Usage</li>
                            </ul>
                        </div><!-- four-col -->

but the outside div is not displaying the right height - this is visible as it has a border on it
here is a fiddle with the full code: http://jsfiddle.net/LwPMN/
i want the four-col div to display inside the web_hosting_extended_features div

A:

Simply add overflow: hidden to the .tabcontent element:
.tabcontent {
    /* other CSS untouched */        
    overflow: hidden;
}

JS Fiddle demo.
Or you can add a clear: both element before the closing tag of the same element (in this case I used a br, but any element will do):
<div class="tabcontent" id="web_hosting_extended_features-1">
    <!-- all content removed -->
        <br />
    <!-- four-col -->
</div>

br {
    clear: both;
}

JS Fiddle demo.

