[Web4lib] CSS float/clear problem

[VanderHart, Robert]

I should mention that this problem occurs in Firefox and Chrome but not in IE.

--
Robert J. Vander Hart
Electronic Resources Librarian | Lamar Soutter Library
University of Massachusetts Medical School 01655
508-856-3290 | Robert.VanderHart at umassmed.edu
http://library.umassmed.edu | LinkedIn: http://www.linkedin.com/in/robertvanderhart

From: VanderHart, Robert
Sent: Thursday, October 28, 2010 4:36 PM
To: 'web4lib at webjunction.org'
Subject: CSS float/clear problem

Hi,

I know this probably has a simple solution, but it's escaping me.

I have a basic page (see http://library.umassmed.edu/~rvanderh/newsite4/index.cfm for source code) that has two floated sidebars and a content div.  The content div has a tabbed search box consisting of a div containing tabs marked up as an unordered list with  float:left applied, and then below that there is a div consisting of the search box.

The problem comes in when clear:both between the two divs is applied.  In that case the search div separates from the tabs and goes below the left sidebar, which also has float:left applied.  When I take the clear:both out, the tabs dip down inside the search box instead of resting on top.

If I change the order of the divs in the markup a different div will drop to the bottom.  For example, if I move the left sidebar markup below the main content markup, then the left sidebar drops to the bottom, but the tabbed search box renders perfectly.

Thanks for taking a look; the solution is probably as plain as day but I'm not seeing it.  Please contact me off-list since I'm a digest subscriber.

--
Robert J. Vander Hart
Electronic Resources Librarian | Lamar Soutter Library
University of Massachusetts Medical School 01655
508-856-3290 | Robert.VanderHart at umassmed.edu
http://library.umassmed.edu | LinkedIn: http://www.linkedin.com/in/robertvanderhart