Log in

View Full Version : CSS Multi Column List


perappgui
12-13-2008, 05:14 PM
Hello all. I've been playing with CSS to try and make my unsorted lists show in a multi column view opposed to a vertical list. After playing around for a while I figured a way to do it. I just have two issues hopefully someone can help with.

First I created a new stylesheet with the following:
#multi ul {
width: 700px;
list-style-type:none;
}
#multi li{
width:180px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
float:left;
}


Within my page I just wrapped my unsorted list the following way.
<div id="multi>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<p></p>

The list displays correctly, meaning the list is broken into columns side by side, but unless I put that <p></p> after the </div> elements below the div, like a horizontal line, floats up in the middle of the page. If I put the <p></p> then everything lines up correctly.

However. The other problem I have is, when I put the <p></p> after the div, and everything lines up correctly, it shows up fine in Firefox. In IE however, there is a huge space between the unsorted list and the content above (which is just text).

Any direction would be greatly appreciated.
Medyman
12-13-2008, 05:18 PM
Try adding the following style:


#multi {
clear:both;
}
Snookerman
12-13-2008, 05:21 PM
You missed the quotes on the <div id="multi>. It should be <div id="multi">.
perappgui
12-13-2008, 05:48 PM
Thanks for the quick replies. The missed quote was a typo, the actual code was correct.

Okay, so I added the


#multi {
clear:both;
}


and it appears to drop everything to the bottom of the page in FF and within IE, there is no change. Not sure what the deal is, maybe I have my div's defined somewhere giving strange behavior?
Snookerman
12-13-2008, 06:01 PM
Could you please post the entire page or maybe a link to your site? Maybe there is something else that is causing you problems.
perappgui
12-13-2008, 06:12 PM
Unfortunately the site is on my local machine. Figured i'd get all the bugs worked out before I uploaded it. =)

Below is the source for the page. I have a few style sheets attached, but figured i'd just post the page source and maybe go from there. Thanks for your help!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Nugent Appraisal Services - What We Appraise</title>


<base href="http://localhost/na/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-6 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link rel="stylesheet" type="text/css" media="handheld" href="http://localhost/na/stylesheet.php?cssid=41&amp;mediatype=handheld" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/na/stylesheet.php?cssid=32&amp;mediatype=screen" />

<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/na/stylesheet.php?cssid=35&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="print" href="http://localhost/na/stylesheet.php?cssid=30&amp;mediatype=print" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/na/stylesheet.php?cssid=36&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/na/stylesheet.php?cssid=31&amp;mediatype=screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/na/stylesheet.php?cssid=73" />


<link rel="start" title="Home Page, shortcut key=1" href="http://localhost/na/" />
<link rel="prev" title="Multimedia" href="http://localhost/na/index.php/multimedia" />
<link rel="next" title="The Appraisal Process" href="http://localhost/na/index.php/default_templates" />



<script type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->



</head>

<body>

<div id="pagewrapper">

<ul class="accessibility">
<li><a href="/na/index.php/how-cmsms-works#menu_vert" title="Skip to navigation" accesskey="n">Skip to navigation</a></li>
<li><a href="/na/index.php/how-cmsms-works#main" title="Skip to content" accesskey="s">Skip to content</a></li>

</ul>


<hr class="accessibility" />


<div id="header">
<!-- banner message and building background -->
<div id="banner">

</div>

<hr class="accessibility" />
</div>


<div id="search">

<form id="cntnt01moduleform_1" method="get" action="index.php">
<div class="hidden">
<input type="hidden" name="mact" value="Search,cntnt01,dosearch,0" />
<input type="hidden" name="cntnt01returnid" value="34" />
</div>


<label for="cntnt01searchinput">Search</label>:&nbsp;<input type="text" id="cntnt01searchinput" name="cntnt01searchinput" size="20" maxlength="50" value="Enter Search..." onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"/><input name="submit" value="Submit" type="submit" />

</form>

</div>



<div class="breadcrumbs">
You are here: <a href="http://localhost/na/">Home</a> &raquo; <span class="lastitem">Appraisal Services</span>
<hr class="accessibility" />
</div>


<div id="content">

<div id="sidebar">

<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>


<ul>

<li><a href="http://localhost/na/" accesskey="1" title="Home Page, shortcut key=1"><dfn>1: </dfn>Home</a>


</li>

<li class="currentpage"><h3><dfn>Current page is 2: </dfn>Appraisal Services</h3>


</li>

<li><a href="http://localhost/na/index.php/default_templates"><dfn>3: </dfn>The Appraisal Process</a>


</li>

<li><a href="http://localhost/na/index.php/Online-Appraisal-Service"><dfn>4: </dfn>Online Evaluation Service</a>


</li>

<li><a href="http://localhost/na/index.php/our-fees"><dfn>5: </dfn>Our Fees</a>


</li>

<li><a href="http://localhost/na/index.php/qualifications"><dfn>6: </dfn>Qualifications</a>


</li>

<li><a href="http://localhost/na/index.php/selling-items"><dfn>7: </dfn>Selling Items</a>


</li>

<li><a href="http://localhost/na/index.php/newsletters"><dfn>8: </dfn>Newsletters</a>


</li>

<li><a href="http://localhost/na/index.php/links-to-assist-our-clients"><dfn>9: </dfn>Links to Assist Our Clients</a>


</li>

<li><a href="http://localhost/na/index.php/news-test"><dfn>10: </dfn>news test</a>


</li>

<li><a href="http://localhost/na/index.php/news-cat-test"><dfn>11: </dfn>news cat test</a>


</li>
</ul>

</div>


<div id="news">
<h2>News</h2>
<!-- Displaying News Module -->
<!-- News Categories: '' -->
<!-- Start News Display Template -->
<p>
Page&nbsp;1&nbsp;of&nbsp;4
&nbsp;<a href="http://localhost/na/index.php?mact=News,m4,default,1&amp;m4number=1&amp;m4detailpage=news&amp;m4pagenumber=2&amp;m4returnid=34&amp;page=34">&gt;</a>&nbsp;<a href="http://localhost/na/index.php?mact=News,m4,default,1&amp;m4number=1&amp;m4detailpage=news&amp;m4pagenumber=4&amp;m4returnid=34&amp;page=34">&gt;&gt;</a>
</p>

<div class="NewsSummary">

<div class="NewsSummaryPostdate">
Dec 11, 2008
</div>

<div class="NewsSummaryLink">
<a href="http://localhost/na/index.php?mact=News,cntnt01,detail,0&amp;cntnt01articleid=4&amp;cntnt01origid=34&amp;cntnt01returnid=34">third test</a>
</div>

<div class="NewsSummaryCategory">
Category: General

</div>

<div class="NewsSummaryAuthor">
Posted by: nugentap
</div>

<div class="NewsSummarySummary">
this is the third test article
</div>

<div class="NewsSummaryMorelink">
[<a href="http://localhost/na/index.php?mact=News,cntnt01,detail,0&amp;cntnt01articleid=4&amp;cntnt01origid=34&amp;cntnt01returnid=34">More</a>]
</div>



</div>
<!-- End News Display Template -->
</div>

</div>


<div id="main">
<div style="float: right;"><a href="http://localhost/na/index.php?mact=Printing,m5,printpage,1&amp;m5showbutton=1&amp;m5script=1&amp;m5returnid=34&amp;page=34" class="noprint" > <img src="modules/Printing/printbutton.gif" title="Print this page" alt="Print this page" />
</a>
</div>
<h2>What We Appraise</h2>

<p>Nugent Appraisal Services is a general residential contents appraisal company with further specialization in valuing books, manuscripts, documents, autographs and antique maps. We consider our scope of expertise as "front door to back door," meaning we are able to value virtually everything in a home or office. Chances are, whatever you want appraised, we have probably appraised an item just like it in our nearly 30 years of experience. We appraise everything from valuable antiques to ordinary home furnishings - one item to large collections.</p>
<h3>Some of the more common items we appraise include:</h3>
<div id="multi">
<ul>
<li>Antiques </li>
<li>China </li>
<li>Dinnerware</li>
<li>Jewelry – Costume </li>
<li>Paintings</li>

<li>Residential Contents </li>
<li>Tools </li>
<li>Art </li>
<li>Clocks </li>
<li>Drawing </li>
<li>Maps </li>
<li>Photographs </li>
<li>Sculpture</li>
<li>Watches </li>

<li>Books </li>
<li>Coins &amp; Currency </li>
<li>Figurines </li>
<li>Medals &amp; Medallions</li>
<li>Porcelain </li>
<li>Silver </li>
<li>Watercolors </li>

<li>Bronzes </li>
<li>Collectibles</li>
<li>Furniture </li>
<li>Memorabilia </li>
<li>Prints</li>
<li>Stamps </li>
<li>Ceramics </li>
<li>Crystal</li>
<li>Glass</li>

<li>Oriental Rugs </li>
<li>Quilts </li>
<li>Tapestries</li>
</ul>
</div> <br />

<div class="hr"></div>
<div class="right49">
<p><a href="/na/index.php/how-cmsms-works#main">^ Top</a></p>

</div>
<div class="left49">
<p>Previous page: <a href="http://localhost/na/index.php/multimedia" title="Multimedia">Multimedia</a> <br />
Next page: <a href="http://localhost/na/index.php/default_templates" title="The Appraisal Process">The Appraisal Process</a></p>
</div>

<hr class="accessibility" />

</div>


</div>


<div id="footer">

</div>



</div>


</body>
</html><!-- 0.496094 / 41 / 10112112 / 10620904 -->
Snookerman
12-13-2008, 06:29 PM
Which of the lists is the problematic one?
perappgui
12-13-2008, 06:45 PM
Well I think I figured out at least half the issue. I added


overflow:auto;

and it seemed to eliminate the need to use the <p></p>. I guess I needed to clear the float. So everything looks great in FireFox. Internet Explorer on the the other hand displays a large gap between the following code


<h3>Some of the more common items we appraise include:</h3>

LARGE GAP

<div id="multi">
<ul>
<li>Antiques </li>
<li>China </li>
<li>Dinnerware</li>
<li>Jewelry – Costume </li>
<li>Paintings</li>

<li>Residential Contents </li>
<li>Tools </li>
<li>Art </li>
<li>Clocks </li>
<li>Drawing </li>
<li>Maps </li>
<li>Photographs </li>
<li>Sculpture</li>
<li>Watches </li>

<li>Books </li>
<li>Coins &amp; Currency </li>
<li>Figurines </li>
<li>Medals &amp; Medallions</li>
<li>Porcelain </li>
<li>Silver </li>
<li>Watercolors </li>

<li>Bronzes </li>
<li>Collectibles</li>
<li>Furniture </li>
<li>Memorabilia </li>
<li>Prints</li>
<li>Stamps </li>
<li>Ceramics </li>
<li>Crystal</li>
<li>Glass</li>

<li>Oriental Rugs </li>
<li>Quilts </li>
<li>Tapestries</li>
</ul>
</div>


Below is the code in question. Thanks again for your help.



<div id="main">
<div style="float: right;"><a href="http://localhost/na/index.php?mact=Printing,m5,printpage,1&amp;m5showbutton=1&amp;m5script=1&amp;m5returnid=34&amp;page=34" class="noprint" > <img src="modules/Printing/printbutton.gif" title="Print this page" alt="Print this page" />
</a>
</div>
<h2>What We Appraise</h2>

<p>Nugent Appraisal Services is a general residential contents appraisal company with further specialization in valuing books, manuscripts, documents, autographs and antique maps. We consider our scope of expertise as "front door to back door," meaning we are able to value virtually everything in a home or office. Chances are, whatever you want appraised, we have probably appraised an item just like it in our nearly 30 years of experience. We appraise everything from valuable antiques to ordinary home furnishings - one item to large collections.</p>
<h3>Some of the more common items we appraise include:</h3>
<div id="multi">
<ul>
<li>Antiques </li>
<li>China </li>
<li>Dinnerware</li>
<li>Jewelry – Costume </li>
<li>Paintings</li>

<li>Residential Contents </li>
<li>Tools </li>
<li>Art </li>
<li>Clocks </li>
<li>Drawing </li>
<li>Maps </li>
<li>Photographs </li>
<li>Sculpture</li>
<li>Watches </li>

<li>Books </li>
<li>Coins &amp; Currency </li>
<li>Figurines </li>
<li>Medals &amp; Medallions</li>
<li>Porcelain </li>
<li>Silver </li>
<li>Watercolors </li>

<li>Bronzes </li>
<li>Collectibles</li>
<li>Furniture </li>
<li>Memorabilia </li>
<li>Prints</li>
<li>Stamps </li>
<li>Ceramics </li>
<li>Crystal</li>
<li>Glass</li>

<li>Oriental Rugs </li>
<li>Quilts </li>
<li>Tapestries</li>
</ul>
</div> <br />

<div class="hr"></div>
Snookerman
12-13-2008, 07:03 PM
Without the css code, I get no gap. I suggest you try the remove the rest of the code that is not connected to the problem until you only have the problematic code with its css and post it all here.
perappgui
12-13-2008, 07:12 PM
I figured it out. I placed in the overflow style and changed the width of the UL and all is well in all browsers. Here is the finished CSS



#multi ul {
width: 600px;
margin: 20px auto;
padding: 0 0 15px 0;
list-style-type: none;
background: #6F0;
overflow: auto;
}
#multi li{
width: 180px;
float: left;
margin: 15px 0 0 0;
padding: 0 10px 0 10px;
line-height: 15px;
}

Thanks for your help!