ul/li items not displaying correctly in a div

Question

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

Don think this will fix the issue, but you are missing `` for the Control Panel Features list. As for your issue, try using a a clearfix css solve - http://stackoverflow.com/questions/8554043/what-is-clearfix — DFord, Oct 07 '13 at 18:51

David Thomas · Accepted Answer · 2013-10-07T18:55:28.987

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.

score 1 · Answer 2 · answered Oct 07 '13 at 18:53

1

Use another div with clear:both; after all four-col divs. Here is the updated fiddle. It is needed because your four-cols have float:left;.

answered Oct 07 '13 at 18:53

Alex

1,657
1
12
6

score 1 · Answer 3 · answered Oct 07 '13 at 19:15

1

Add this CSS code to your styles

#web_hosting_extended_features-1{

overflow: hidden; }

Also look into the CSS Clearfix for future reference http://www.webtoolkit.info/css-clearfix.html

answered Oct 07 '13 at 19:15

dhutchinson

126
4

DFord · Answer 4 · 2013-10-07T19:09:38.773

0

Here is the clearfix css fix

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* IE < 8 */
}

http://jsfiddle.net/LwPMN/6/

edited Oct 07 '13 at 19:09

answered Oct 07 '13 at 18:55

DFord

2,352
4
33
51

score 0 · Answer 5 · answered Oct 07 '13 at 19:04

0

add "overflow: hidden;" to one of those CSS rules.

div#web_hosting_extended_features-1{
    overflow: hidden;
}
.tabcontent{
    overflow: hidden;
}

answered Oct 07 '13 at 19:04

Tun Zarni Kyaw

2,099
2
21
27

score 0 · Answer 6 · answered Oct 07 '13 at 19:05

0

Well, you are using floats. You either need to clear your floats, or go with the "new way", which would be to set overflow: auto; to your outter div (.tabcontent)

answered Oct 07 '13 at 19:05

Giovanni Silveira

1,281
8
7

ul/li items not displaying correctly in a div

6 Answers6