I have a page that displays a bunch of images in two columns, with text right beside each. To do this I used LI with list-style: none and float: left. This is contained within a DIV that sets the background colour, width, padding, etc. The problem I am having is this container DIV is only as tall as the padding that is set within the stylesheet, when it should extend to below the bottommost list item. I can't seem to figure out why it is doing this. I have used lists in this way before, but have never had this problem. Also, the two column layout comes from setting the width of each LI element to only allow two on each row. When I try to separate the page into sections, each with a title and separate lists, the lists merge into one. For example if the first list has an odd number of images, the first image of the second list is on the same line as the last image of the first list....does that make sense? I tried the obvious, using different css class names, as well as separating the DIVs, but with no luck. Any ideas?---------------------------------------------------------------------The relevant CSS is:#content {background: #1B1915;clear: both;}/* portfolio*/#portfolio {width: 450px;padding: 10px 75px 75px;}ul.port {padding: 20px 0 auto 0;display: block;}ul.port li {float: left;list-style: none;width: 210px;height: 101px;margin: 0 15px 20px 0;}ul.port li b {display: block;font-size: 1.4em;margin-bottom: 5px;}ul.port li img {float: left;border: 1px solid #2A2721;padding: 1px;margin-right: 15px;}ul.port li a {font-size: 1.2em;}--------------------------------------------------------------The relevant HTML is:<div id="content"> <div id="portfolio"> <ul class="port"> <li><img src="img/smallport/equip.gif" /><b>EQuIP</b> <a href="img/portfolio/equip4.jpg" rel="lightbox[equip]">|1|</a> <a href="img/portfolio/equip3.jpg" rel="lightbox[equip]">|2|</a> <a href="img/portfolio/equip5.jpg" rel="lightbox[equip]">|3|</a> </li> <li><img src="img/smallport/daveybaby.gif" /><b>daveybaby</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/outwrite.gif" /><b>OutWrite! A Queer Review</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/mcgillcheer.gif" /><b>McGill Cheerleading</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/sic.gif" /><b>Social Issues Commission</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/hml.gif" /><b>VoteHML</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/delburn.gif" /><b>Delburn</b> <a href="img/portfolio/daveybaby.jpg" rel="lightbox">|1|</a> </li> </ul> <ul class="port"> <li><img src="img/smallport/prideweek.gif" /><b>Pride Week Poster</b> <a href="img/portfolio/prideweek.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/ff.gif" /><b>Final Fantasy Concert Poster</b> <a href="img/portfolio/ff.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/coffeehouse.gif" /><b>Coffeehouse Poster</b> <a href="img/portfolio/coffeehouse.jpg" rel="lightbox">|1|</a> </li> <li><img src="img/smallport/kamp.gif" /><b>KAMP Poster</b> <a href="img/portfolio/kamp.jpg" rel="lightbox">|1|</a> </li> </ul> </div> </div>---------------------------------------------------------Here is a screenshot: (the darker background is where the "portfolio" div appears to end)