fit to screen

[chicane]

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!!

[PicnicTutorials]

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.

[chicane]

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.

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!!

[virtual]

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

All your other content goes within this section

 

#container {
width: 960px;
margin: 0 auto;
}

 

This is just the bare bones for positioning. And not all your content has to go within

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/html-training/css/positioning/

Edited January 27, 2010 by virtual

[Wickham]

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:-

.........all page content.........

 

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:-

 

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.

Edited January 27, 2010 by Wickham