• Registered: January 25, 2010
  • Posts: 2

Topic: fit to screen

hello, i am new to webdesign so please forgive me. i have come across a problem which i cannot find the answer!

How do i make the webpage fit all screen sizes? i am using a 15" screen and the site fits nicely. my friend has a 20" screen and the site sits on the left hand side of the page!

Also/alternatively, how do i make the webpage sit nicely in the middle of the screen?

Is there some code that can be placed onto the page??

i imagine that this could be an oversight by myself but it has got me completely stumped!!!!

thank you to anyone who can help me!!

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,183
  • Reputation: 3

Re: fit to screen

If you want it to fill the entire screen, then just don't give the outer container (a div) a width. If you want it to center, then you'll need the give the outer container a width and margin:auto.

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Registered: January 25, 2010
  • Posts: 2

Re: fit to screen

Thanks - advanced member.

I tried both and it doesnt seem to work. I have the container div in css with an absolute positioning. have followed your instructions but no joy. sad
Unfortunately, my computer with design programs on it has crashed so cannot send you the css file.

Do i have to use fixed, static, etc.

Thank you once again for your help!! smile  smile

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 579
  • Reputation: 1

Re: fit to screen

Ay yay yay, forget absolute positioning. That takes the div out of the normal flow of the web page.
You do not have to give the container div any other positioning apart from the width you want it to be and margin: 0 auto; That will center it on any screen size. For example

<div id="container">
<div id="content">
<p>All your other content goes within this section</p>
</div><!--end content-->
</div><!--end container-->
#container {
width: 960px;
margin: 0 auto;
}

This is just the bare bones for positioning. And not all your content has to go within <p> tags.
Position by default is static, so you don't have to declare it. Read this article on positioning, it will help you understand better.
http://www.barelyfitz.com/screencast/ht … sitioning/

Last edited by virtual (January 27, 2010 3:01 pm)

Lynne
180virtual

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: fit to screen

1. Making the page center. Code a wrap div like Eric said, but also with position: relative:-

#wrap { width: 900px; margin: 0 auto; position: relative; }

Then structure your page body section:-

<body>
<div id="wrap">
.........all page content.........
</div>
</body>

Any position: absolute elements inside the #wrap div will probably need the left size edited because position: absolute divs take their position from the top left corner of the position: relative wrap div instead of the top left corner of the window or screen, so when the wrap div moves to center in large resolutions because of margin: auto, the position: absolute divs move with it but retain their positions inside.

2. A page which always fits the window width requires all widths to be in % totaling 100%. That includes all divs, tables, table cells, lists, forms and also side padding and side margin. It also needs all images to be sized in % like:-

<img style="width: 22%;" src="photo1.jpg" alt="Photo 1">

Borders can't be sized in % so if you have side borders in px, total the other items to 97% or 98% to allow for the borders in px.

It's much harder to code a totally fluid page width as content will get squashed up or very spread out. It works best when there isn't much content on the page.

You can use min-width and max-width as an alternative but that doesn't work in IE6.

Last edited by Wickham (January 27, 2010 3:01 pm)

Vote up Vote down