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 to the CF scene
    Join Date
    Jan 2008
    Location
    Orlando, FL
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile CSS 100% width and height layout, small background img issue

    Hey everybody! This is my first post, and I just want to say I am glad to find a group of people willing to help when these problems come up.

    I just finished doing the CSS for my new website, and there's a small problem. Here's the layout URL:

    http://www.gofizbo.com/listing/

    It should look almost identical in IE(6+) and Firefox. It's 100% height and width, and fluid. I did, however, set a minimum width because I have two columns on float, and if the browser is made too small, it pushes the right DIV contents (the house picture) down and out of the flow. Anyways...

    The layout works until you resize the browser window and the scrollbars show up. It's a very strange issue I can't quite understand. I was hoping somebody here could help me out with this. I took two screenshots to show what's going on...

    http://www.gofizbo.com/listing/messup1.jpg
    http://www.gofizbo.com/listing/messup2.jpg

    As you can see, the top background (the dark grey) and the side background (the orange on the right and left, and the light gray on the right) just stop at the point you can't see without scrolling. I'm not sure that makes sense, but it seems that the DIVs aren't actually stretching 100% of the page. The backgrounds are only extending the size of the browser, NOT the actual page. Once you start scrolling, you can see the backgrounds aren't there.

    For the 100% height, I set the html, body, and div's to 100%. It seemed to work like a charm until I filled the page up enough to see scrollbars. For the 100% width (top part), I just simply set the top DIV to 100% width...simple enough, right?

    I hope this all made sense. Let me know if you have any questions or want me to clear something up. Any help would be greatly appreciated. Thanks!

    Alex

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

    I have a full height solution that works here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    One tip I can give you - make your yellow border background image (leftrightbgorange.gif) of 1 px height!

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Orlando, FL
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

    I have a full height solution that works here.

    Okay thanks! I'm going to try to redo the layout with the 100% height link you sent me.

    Any idea why it's affecting the width as well though? Setting a DIV as 100% width, I thought, did the job with no problems.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    but it seems that the DIVs aren't actually stretching 100% of the page. The backgrounds are only extending the size of the browser, NOT the actual page.
    That's exactly what 100% is though. One width or height of the browser window.
    To fix your header so it goes the full width with or without scrollbars, remove any width statement.


    Oh yeah, $215,000 for that house had me ready to sell out and move to Florida Too funny
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    GoFizbo (01-07-2008)

  • #6
    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
    I have a full height solution that works here.
    Very useful. I have added it to my Sources list.

    Frank

    http://exitfegs.co.uk/Sources.html
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Location
    Orlando, FL
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    That's the problem with 100% height. When there is scroll bars, your height is 100% of the viewer window and no more - you can scroll past that.

    I have a full height solution that works here.
    Alright, I fixed the width part of the problem. What's the difference between what I'm doing and your fix? I noticed there's no "height=100%" set anywhere except in the IE version for the #wrap DIV. I'm curious...what makes it work? The min-height? But then why does it work in IE? Because I'm having problems with IE too. Thanks for everything so far Excavator.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by GoFizbo View Post
    I'm curious...what makes it work? The min-height? But then why does it work in IE? Because I'm having problems with IE too. Thanks for everything so far Excavator.
    The min-height makes it work in newer browsers and the *html {height:100%} makes it work in IE6. That's the star hack I think?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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