tk2k1

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

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!

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)

hey. I am coding the style sheet for a website that I am working on and am having a bit o' trouble. I have 9 boxes created with css and divs, with each having a different position on the page and therefore a different css statement. For example, the first box is coded as follows:div.link-box11 {border: 0px;background-color: #FFF;position: absolute;top: 20px;left: 250px;width: 240px;height: 40px;}So I have 9 of these statements, and I now want to add the :hover pseudo class to each of them, so that the box changes colour when the pointer is over it. Now I could do it the long way, but I want to learn a shortcut, if there is one, for future reference. Is there any way to code this so that I can reference all 9 boxes with maybe just one statement?thanks!