Fitting Website to all Resolutions RRS feed

  • Question

  • Ok guys, I have a question for you.


    I have been aware that my boss's website (I made it for him with the help from this website) does not look the same on all computers for a long time but never had the cajones to dive into what the problem was.


    I recently found out that the problem is not all computer resolutions are the same. I did some research and found that using %'s for width/height of my div containers would fix the problem. While this might be true, and I'm not sure if it is or not, I can't seem to make my images compatible with the change.


    Here is my website URL:


    For example, the masthead at the top: #masthead {
        border-left: thin solid #FFFFFF;
        border-right: thin solid #FFFFFF;
        border-top: thin solid #FFFFFF;
        background-position: center;
        padding: 0;
        margin: 0;
        height: 100%;
        background-image: url('Images/BruleLawSlogan.png');
        background-repeat: no-repeat;
        width: 100%;
        border-bottom-color: #FFFFFF;
        border-right-style: solid;
        border-left-style: solid;
        border-right-width: thin;
        border-left-width: thin;
        border-top-style: none;


    I have been experimenting with a lot of different things using a test page but haven't found any solutions.


    Can anyone help?


    (and yes last time I was here I was told how sloppy my coding is but my site DOES work, maybe not as optimally as the people who are 200x better at this than I am, though)


    edit: To clarify, my question is how to line up the images (masthead and bottom image) to fit the new % assignments in the div #container

    Wednesday, December 8, 2010 4:08 PM

All replies

  • Don't use percents for sizing. Ever.

    Well...there are some uses for it, but you'll drive yourself crazy. Use pixels; they are more predictable for sizing, and percents offer you no benefits.

    What do you mean, " 'twas brillig"?!?
    Wednesday, December 8, 2010 4:38 PM
  • Ok, so you're suggesting staying away from percentages. So how do I fix my website looking 'fat' on other computer screens? On mine it looks perfect. On others the middle section is HUGE and you have to scroll down to actually see the bottom image.
    Wednesday, December 8, 2010 4:45 PM
  • Don't use 100% for height on a div unless you want really, really unprdictable results. You can use it for images but given that a browser isn't a graphics program the results are likely to be really ugly.
    MS MVP Expression Tutorials & Help & Expression Web forums
    Wednesday, December 8, 2010 6:13 PM
  • Give up the idea that you can make a web page look the same on all screens, if by that you mean fill up all the space in the browser window. (And realize that screen resolution tells you nothing about what size a visitor has opened their the browser window to.)

    It simply can't happen.  Your choices are:

    Use fixed widths, and center the site.  Some people will see larger empty margins on either side than others.

    Use semi-liquid widths.  That is, have a min and a max width.  IE6 makes this difficult, but you could default to a fixed width for it.  The difference between this and the first choice is that you can stretch the width a certain amount - just the amount where it still looks good - and have less margin on either side for wider browser windows.

    Use 100% liquid width.  The site will squish horribly for narrow browser windows, and look horrible in very wide browser windows.  There are very few page designs where this makes sense.

    On heights:  Don't try and take up the entire browser window for height.  Just let it be the height it needs to be for the page content.

    And, remember: people can resize text in their browser, and may indeed need to do that to see your site (small physical screens with high resolution making text too small, or simply eyesight that is not comfortable reading small text), so your site will *still* look different, even on the identical computer screen and the identical browser window size, with two different visitors who have different text size settings.  Simply accept that.  Make sure you don't put fixed heights in, so that the page can gracefully expand when text size is expanded.

    Wednesday, December 8, 2010 6:50 PM
  • By the way, a comment unrelated to your question:  The background color has low contrast with the text color, and I find it very hard on the eyes.
    Wednesday, December 8, 2010 7:19 PM