Spike - Tenbus wrote: > Good morning! Afternoon here ;-)
> I'm working on a new website design and am trying to make it > totally CSS based. The overall design is based upon a Liquid > two column layout with header and footer from > http://css.maxdesign.com.au/floatutorial/tutorial0816.htm . > > I seem to be getting on reasonably well but have hit a problem > including a floated thumbnail gallery which is based upon Ove > Klykken's from http://www.domedia.org/ . > > On this page, although the footer is being "pushed down" > enough to be below the content the content div is not scaling, > consequently the left-hand side coloured border is not > extending all the way down. Set a background to div#content and you can see why. > The problem page is here > > http://www.emmajohnstoneceramics.com/new/gallery.php > > The associated CSS file is here > > http://www.emmajohnstoneceramics.com/new/emma4.css > > The problem is apparent in FF1.0.7, Opera 8.5, Mozilla 1.7.11 > all WinXP. The border is only as high as the div. To encompass floats it needs a clearing element after the floats, before the end of the div, like so: Add this right after the last thumbnail div: <div class="clear"> </div> Then add this to the CSS: div.clear{ clear:both; } > IE6.0 performs (naturally) slightly differently. It > seems to break up the border and add a line part way down. IE doesn't need such a clearing element. The reason IE doesn't show the border all the way down is due to another bug, called peek-a-boo. (if you refresh, the border will be there, if you cover the window and uncover it, it will be gone again) Add zoom:1; to div#content and this bug will be gone. -- Els http://locusmeus.com/ http://locusoptimus.com/ ______________________________________________________________________ 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/
