5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Designing with percentages...

by DavidO
4 replies
  • WEB DESIGN
    • |
I'm trying to use percentages to design a landing page that looks uniform on all screen resolutions. It uses a large background image that will stretch to 100% width.

Is it possible to also set the height to a fixed percentage? The image content allows for a certain amount of flexibility in different aspect ratios.

I'm trying to achieve a simple, liquid one-column layout something like this:

header height: 20%
content height: 60%
footer height: 20%

I have no problem getting good results with 100% width but so far I don't get anything close to correct setting both width and height in percentages.

The templates I've found online only use the width attribute so I'm wondering if this can even be done.

Any suggestions?
#designing #percentages
  • Profile picture of the author Silke
    Can you post here some relevant code you used in your page ?
    Signature
    Costa Brava villas
    {{ DiscussionBoard.errors[2554090].message }}
    • Profile picture of the author Mr Rose
      You can't use a percentage for height.

      Just set a minimum height. I'd say usually min-height:600px; for the main body. And whatever looks good for header and footer.
      The height will expand if it needs to to compensate for the content.



      Note that IE6 doesn't understand min-height, but you can do an alternate conditional style and set an actual height for IE6 if this concerns you.
      {{ DiscussionBoard.errors[2556260].message }}
  • Profile picture of the author csmcmanus
    I concur with Mr Rose on the height tips. It is less of a headache when you break away from percentages and work on fixed widths and auto height overall. just my 2 cents
    Signature

    I am grateful to be involved in an ever changing advertising/marketing industry and proud to live in the Tacoma Wasington area. How's it goin?

    {{ DiscussionBoard.errors[2562132].message }}
  • Profile picture of the author davidsbain
    Most screen resolutions today only change your web page drastically in the width dimension. The Height does not change that much to be a major issue like the width can be. If you want to use percentages then I would suggest to only use it for the width.
    {{ DiscussionBoard.errors[2562172].message }}

Trending Topics