Results 1 to 6 of 6

Thread: Site Not Expanding With Browser

  1. #1
    Join Date
    Nov 2011

    Site Not Expanding With Browser

    So I posted this yesterday, and thought I figured it out. Can anyone tell me what is happening here? If you shrink the browser to a couple hundred pixels wide, and then scroll right you will see what is happening.


    I can't seem to figure this out.

  2. #2
    Join Date
    Aug 2006
    Your purple background is set to width:100%, which makes sense if your site is supposed to be whatever size the browser is. But pretty much everything else seems to have a width of 980px. So when your browser is 500px, the purple box is 500px, but everything else is still 980px. You could set a min-width of 980px on #header-back so it doesn't shrink past that.


  3. #3
    Join Date
    Nov 2011
    That makes sense. Now if I just got rid of #header-back I could do the same with #header-content and just place the min-width there or would that not work the same?

  4. #4
    Join Date
    Nov 2011
    Actually, I placed the min-width on the #header-wrap, not sure if that's what you meant, and it seemed to fix it. I ended up getting rid of #header-back. Thanks for the advice!

  5. #5
    Join Date
    May 2005
    Gold Coast (MS)
    Might help to do a responsive design:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    What are the best programming fonts?: http://slant.co/topics/67/~what-are-...gramming-fonts

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/
    What The Heck Is Responsive Web Design? (A super-impressive CSS3 presentation built on impress.js, demonstrating the basics of Responsive Web Design): http://johnpolacek.github.com/WhatTh...ressjs/#/title
    Creating Responsive HTML5 Touch Interfaces: http://www.youtube.com/watch?v=lcD9CF0bxyk
    Responsive Images: How they Almost Worked and What We Need: http://www.alistapart.com/articles/r...-what-we-need/
    Responsive Tables: http://www.zurb.com/playground/responsive-tables

    responsivepx – screen-size testing tool: http://responsivepx.com/

    FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
    Adapt.js - Adaptive CSS: http://adapt.960.gs/

  6. #6
    Join Date
    Nov 2011


    Thanks the min-width worked like a charm after I messed around with some other CSS. It was only happening in Firefox, but it's fixed thanks! And I would do a responsive design if the client was willing to pay for it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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