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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question min-width not working...how I expect at least.

    Hi, I've a page with lots of div's (no tables! Yea!)
    http://www.girlscoutsmoheartland.org/newpagetest.php
    But in the center main div (ID'ed #content) I have an image 600px wide. If the browser window is made narrow enough, it pops the image way down below the encroaching side div's.
    I thought using min-width on that image's div would prevent the browser from narrowing the contents that far, but it doesn't seem to be working.
    Is that not how min-width works? Is there something else I need to do to keep the browser from narrowing the contents too much?
    Thanks for any suggestion.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have you tried setting you image width to percentages as well? I notice you use a combination or pixels and percentages to style elements. The pixel widths for any element dont allow for in different page widths. A pixel in a 800 x 600 resolution browser is much larger than one in a 1200 x 900 browser. Just a thought.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    Have you tried setting you image width to percentages as well?
    Hmm, I hadn't thought of that.
    That's a great idea for some other image possibilities, but not that main center image! Having that one stretch big doesn't work! It's HTML dimensions are set exactly to the image's actual width/height.
    I'll keep that suggestion in mind for other possibilities, though. Thanks!

    In any case, doesn't help with the image popping below the side divs (I tried).

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well that is whats causing the image to "pop" below the right div. When the right div encroaches into the set width of the image, the image MUST go somewhere. It cant go over top of the div so it shifts underneath it. Again, if you design the page with a wide screen resolution, then view it on a low resolution, it will cause issues everytime. I know! I'm having s silimar issue at the moment. Still, try to set the image to percents that mimic the original dimensions. Also, you can try to designing your page with an elastic design. Then your page will just "disappear" as it shrinks. I think you can google elastic page layout and find some good info/tutorials.


  •  

    Posting Permissions

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