[css-d] Want to Clear One Float, Not All of Them

[Chris Akins]

url: www.springfieldmogov.org/elections/parks/projects.html
css: www.springfieldmogov.org/css/elections_parks1.css

Using a modified liquid 2-col layout from Floatutorial I've added some
of my own stuff which you can see at the bottom of the CSS file.

Problem:   I'd like div id=details to clear the Thank You
graphic which is floated left, residing in it's own div
id=heading.  But if I put a 'clear:left' on the 'details' div it
then clears the div id=leftnav which holds the long parks image on
the far left of the page.

I've played around with putting various iterations of 'position:
absolute or relative' on various elements, but haven't come up with
anything that will allow the 'details' div to end up just below the
'thank you' graphic but NOT way down the page.

Is what I'm wanting to do realistic?  The page doesn't seem that
complex, really.  Didn't expect it to be this difficult.

Thanks in advance for any input.

Chris Akins
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Want to Clear One Float, Not All of Them

[Gunlaug Sørtun]

Chris Akins wrote:
 url: www.springfieldmogov.org/elections/parks/projects.html

 Problem:   I'd like div id=details to clear the Thank You 
 graphic which is floated left, residing in it's own div 
 id=heading.  But if I put a 'clear:left' on the 'details' div it 
 then clears the div id=leftnav which holds the long parks image
 on the far left of the page.

Solution: isolate the #content from the rest of the page, so 'clear'
stays within it.

One solution, add/correct:

#content {float: left; margin: 0;}
#details {clear: left;}

...which will work.



I would normally use:

#content {height: 100%; display: table-cell;}
#details {clear: left;}

...but my Safari seems to be a bit sensitive to 'table-cell'. Don't 
know if that is fixed in the latest version.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/