CSS - div column width problem: content pushed down

Can anybody help?

I am building a site and have a problem with content being shoved down underneath previous content. I'm guessing it's an issue relating to float but I'm a bit confused.

I had my col_mid div set to width 88%, which works in Firefox but in IE6 it kind of wraps underneath the col_left div.

If I set it to 80% it works fine.

I don't understand this as they are the only to width defining columns and, with the left being 10% and having (hopefully) ensured zero padding and margins, I thought 98% coverage of a containing div would be fine.

What's the best way to protect from this happening on other versions that I have not tested against? Should I change the overflow?

Any alternative approaches are welcome to this recently self-taught newbie CSS coder...

My page is here and the CSS is currently within the main html source (will separate later).

http://www.buggslife.com/development/gal_test6d.html

It may not be related but another question - can anyone see why I have the white space underneath the content? I cannot get rid of it...

Thanks in advance. A frustrated Buggslife.

All I see when I visit http://www.buggslife.com/development/gal_test6d.html is:

Not Found

The requested URL /development/gal_test6d.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Apache/2.2.15 (Unix) mod_ssl/2.2.15 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at www.buggslife.com Port 80

It may not be related but another question - can anyone see why I have the white space underneath the content? I cannot get rid of it...

The white space is caused by all the <br />'s

Look here. (http://exitfegs.co.uk/13_5.html)


Frank

Sorry about that - try:
http://www.buggslife.com/galleries/index.html

I have reduced the div width now to compensate for IE but let me know if it still drops for you.

Can I set the width differently for IE and other browsers?

(If the link doesn't work try:
www.buggslife.com
then click galleries)

I just don't get why total column widths cannot add up to more than 90% or is it just an IE peculiarity?

The widths of the three columns here (http://exitfegs.co.uk/Sources.html) add up to 93% plus margins.

It is the same with an xhtml doctype.

Frank

Looks like you have cut your page down to two columns.

I have a few suggestions.

Set a minimum width on #top so that the fixed width #menu_tr does not wrap under #main_banner on narrow windows.

Set a minimum width on #main or #flashcontent so that the right edge of photos are not cropped, but rather a horizontal scroll bar is provided on narrow windows.

You can use IE conditional includes to either have an additional IE only stylesheet, or I believe it is possible to exclude the standard stylesheet entirely for IE and have an IE only stylesheet.

Thanks effpeetee for the link - plenty of the links within that site are quite handy resources.

mbaker: many thanks for putting the effort in to look at my problem and also for the suggestions. When you spell it out so simply the min-width option makes a lot of sense. I'll give it a try. By the way, I did drop from 3 to 2 columns just because I didn't feel I needed the right col and needed the room for the photos. If it would help maintain layout I can revert back.


I have since moved to a separate stylesheet but assume you were still able to access it?

I like the separate IE stylesheet idea and will look into that as well.

I still cannot seem to control the white space underneath - any ideas?

The space underneath probably has a lot to do with:
body
{
height: 1300px;
}


Here are all of the heights in your stylesheet with some suggested changes - additions in green, deletions in red.

html {
height: 100%;
}

body
{
height: 1300px;100%;
}

div#maincontainer
{
height: 100%;
}

div#colleft{
height: 100%;
}

div#sidebar{
height: 100%;
}

.arrowgreen li a{
height: 24px; /*Set to height of bg image - padding within link (ie: 32px - 4px - 4px)*/
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
}

div#col_mid
{
height: 100%;
}


div#top{
height: 90px; /* 90px is a guess, adjust as required */
}

div#menu_tr
{
height: 30px;
}

div#main
{
height: 100%;
margin-bottom: -90px; /* match div#top height */
}

div#floater
{
height: 50%;
}

#low
{
height: auto;
}


The one part I'm not sure of is div#main { margin-bottom: -90px; } as I generally don't bother with heights in my own designs.