[Web4lib] CSS float/clear problem

Mutch, Andrew AMutch at twp.waterford.mi.us
Fri Oct 29 12:41:24 EDT 2010


Try adding a float:left on your content DIV. I've found that footer DIVs
won't properly clear if the DIVs that preceed them don't have the float
property set. Playing around with Chrome, setting that to float:left
properly clears the footer. 

Good luck!

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI

-----Original Message-----
From: web4lib-bounces at webjunction.org
[mailto:web4lib-bounces at webjunction.org] On Behalf Of VanderHart, Robert
Sent: Friday, October 29, 2010 12:30 PM
To: 'Thomas Dowling'
Cc: 'web4lib at webjunction.org'
Subject: Re: [Web4lib] CSS float/clear problem

Thanks to everyone who offered suggestions on what has been a
particularly vexing issue for me.  

Several people suggested removing the clear span from the markup, which
almost works, but the tabs then drop inside of the box.  

Thomas's suggestion about absolute positioning of the left bar appears
to offer the best cross-browser solution, as seen here:


The only issue is that the footer doesn't clear the left bar until the
browser window is contracted enough to push the main content down.  I'm
wondering, what's the best solution to deal with that issue?  At this
point I can't say whether the center content area will have enough
content to push the footer down far enough to clear the left bar.
Anyway, that seems like a haphazard fix.

Thanks again!


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:

-----Original Message-----
From: Thomas Dowling [mailto:tdowling at ohiolink.edu]
Sent: Friday, October 29, 2010 10:06 AM
To: VanderHart, Robert
Cc: 'web4lib at webjunction.org'
Subject: Re: [Web4lib] CSS float/clear problem

On 10/28/2010 04:50 PM, VanderHart, Robert wrote:
> I should mention that this problem occurs in Firefox and Chrome but
not in IE.

That usually means the markup and/or CSS is broken, but in a way that
happens to be bug-compatible with IE.

Not to second-guess your design, but would things work more easily by
making the list items display:inline instead of floating them, or by
making the sidebar position:absolute instead of floating that?

Thomas Dowling
tdowling at ohiolink.edu

Web4lib mailing list
Web4lib at webjunction.org

More information about the Web4lib mailing list