Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.


    Frank
    Last edited by effpeetee; 05-13-2010 at 11:10 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The widths of the three columns here add up to 93% plus margins.

    It is the same with an xhtml doctype.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • Users who have thanked mbaker for this post:

    buggslife (05-14-2010)

  • #7
    New Coder
    Join Date
    May 2010
    Location
    www.buggslife.com
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The space underneath probably has a lot to do with:
    Code:
    body
    {
    	height: 1300px;
    }
    Here are all of the heights in your stylesheet with some suggested changes - additions in green, deletions in red.

    Code:
    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.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •