Lists acting independent from DIV

[tk2k1]

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)

[jlhaslip]

try adding some margin-bottom or padding-bottom (not sure which would work for what you want) to this element

ul.port li img {float: left;border: 1px solid #2A2721;padding: 1px;margin-right: 15px;}

Might have to play with it a little to achieve the look you want..And to avoid the other problem, inside a containing div which is centred (portfolio), use two different named Div's. Float the first one (port_left) left, and the second one (port_right) right. Might work. Not tested.Something like this:

#portfolio {width: 450px;padding: 10px 75px 75px;margin-left:auto;margin-right:auto;text-align:center;}ul.port_left {padding: 20px 0 auto 0; // might also add an actual px value instead of auto?display: block;float:left;}ul.port_right {padding: 20px 0 auto 0;display: block;float:right;}

Ummm, I'll have some time tomorrow to have another look at this. It is late and this might not be the best way.And could you post a link to the site, please. That way we can download the full html and css to review. Thanks.

[tk2k1]

Thanks for your suggestions. Adding padding-bottom or margin-bottom only spaces the images apart, it does not make the div background extend past the last image. Ughh, I have tried everything I can think of, but just can't make it work. I do not have a server for this site yet, but I have uploaded it to another server at: http://addicon.net/tk/The CSS is at:http://addicon.net/tk/tk.cssThanks for your help!

[jesh]

If you are using float to position the elements within that div, you're going to have to use a clear in order for the div to stretch to a size that is big enough to display all of the floated elements.Try adding this after your floated elements and just before the closing div tag:

<br style="clear: both;" />

You might have to play around with that a little, but it should help.

[tk2k1]

Jesh, that was exactly what was missing, and was the solution to both my problems. Thanks so much!

[jesh]

Jesh, that was exactly what was missing, and was the solution to both my problems. Thanks so much!

Nice! Glad I could help.