Date: 07/11/07 (WebDesign)    Keywords: no keywords

I am having trouble clearing a float.

I have a 2 column layout.
The left side is a vertical menu (float:left;), the right is the content area.

#page-container { width: 780px; margin: auto; text-align: left; }
#content { margin-left: 225px; line-height: 18px;}
#menu{float: left; width: 205px; padding-left: 10px;}



Within the content area I would like to display some items in a "catalogue" format with another 2 columns.

ITEM NAME

*IMG* (float:left) DESCRIPTION GOES HERE AND WRAPS INLINE WITH ITSELF

*dotted line to separate from next item*

I created a new container within #content called #catalogue to display this secondary 2 column content.

#catalogue {width: 510px;)
#catalogue .left{width: 110px;float:left;}
#catalogue .right{margin-left: 110px;}
.dottedline {padding-top:10px; border-bottom:dotted 1px #666666;}

The problem is that the dotted line isn't clearing the image float on items that have very short descriptions. When I add clear:both to the dotted line it's ALSO clearing the #menu float from the #page-container, not just the float within my new #catalogue container.

Strangely, the dotted line isn't extending the full width of the page when this clear happens, it's staying within the confines of the #content area but it's putting a huge gap between my first item and the dotted line (the vertical menu is quite long)

Wtf do I have to do to get a dotted line to clear the catalogue item/description block but NOT the main menu? (simply moving the dotted line div up within the #catalogue div didn't work)

Item

Description

Etc

Follow this link for more information about the program (pdf)  |  back to the top

Source: http://community.livejournal.com/webdesign/1280109.html