[Web4lib] CSS float/clear problem
Robert.VanderHart at umassmed.edu
Thu Oct 28 16:36:12 EDT 2010
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
More information about the Web4lib