View Full Version : Stretching question?

10-29-2005, 03:49 PM
how do i make a page stretch with it's layout to the users screen size..

I know this can be done with flash but how would I do it with a basic html.

Lets say i make a layout 800x300 centered white background and the layout is black, How would I make the sides stretch out so there is only white at the top and at the bottom and not on the sides..

Im wondering if this would be done with vector images or some other way i know it cant be to hard :blink:

i hope that was a good anough description ;)

Creative Insanity
10-29-2005, 05:05 PM
The best resolve for this would be a little tut that davidj post.
ne of the most asked questions in our forums is "how do I center my content?"

By "centering" we mean keeping all the content centered in the browser viewing area
even at different resolutions and even if a user re-sizes the page.

By using a CSS "wrapper" this is very easy to accomplish.

There are basically 2 methods - a "liquid" or "fluid" method and a "rigid" method.

The "liquid" method adjusts the content width on the fly by having the content width be always a certain
percentage of the entire viewport width.

This a accomplished by using the following code:

<div class="wrapper"> all page content goes here </div>

<div.wrapper {
margin-left : 10%;
margin-right : 10%;

This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.

However more designers prefer the "rigid" method which sets the content to a specific pixel width.

"Rigid" in this case means setting the "wrapper" to a specific width that will fit most common broswer resolutions
without causing a horizontal scrollbar to appear.

It used to be the most common screen resolution was 640px wide.
Today however it is much more common to have a 800px or 1024px width.
It is not however a good idea to set this width wider like 800px because even with a browser maximized window there are
still pixels being used for the vertical scroll bar.
To account for this you should use a width of no more than 770px.

How about the user that has his resolution set at 1024px?
If the user maximizes their window that leaves appx 230px of horizontal window space left over. It has to go somewhere.
The cleanest solution is to split this blank space in half and put it equally on either side of the wrapper.
However we can't use ordinary margins to do this.
Percentage sized margins won't work with a pixel-sized wrapper.
CSS to the rescue....
CSS has a property called "auto" for margins. If the values for the side margins are set to "auto"
the resulting side margins become equal and automatically fill the remaining horizontal space, giving us one centered box
and equal margins on either side. Just what we want.

This works great in most modern browsers, BUT all versions of Internet Explorer/Win previous to version 6 do not support "auto"
margins. Even IE6/Win will fail if the browser is not in "standards" mode based on the doctype of the web page.

So how do we get around this?

Well IE has a bug in it that lets us make a CSS hack to fix this problem.

The CSS property "text-align" can have values of left, right, center, justify, and inherit.
This property is normally applied to a block level element such as a paragraph.
This causes all the inline content within that element to be aligned with the value assigned to it.

However IE/Win browsers incorrectly apply this property to ALL the elements in the "text-align" box
and not just the inline content as it is supposed to.
Do you see what this means - IE/Win fails to support "auto" margins, BUT, it does incorrectly center boxes when they are nested
inside another box that has "{text-align : center;}.

So how do we use this to get our centered wrapper. We set the body to text-align : center, and then use the wrapper to
reset our text to align left.


<div class="wrapper"> all content goes here </div>


body {
text-align : center ;

div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;

Now we have a web page with all the content centered in the broswer window with even margins on both sides.

Almost finished. There is one other minor problem that has to be addressed.
Gecko-based browsers (Firefox, Netscape, Mozilla) have a problem when using auto side margins.
They interpret it very literally. What happens is, if the user narrows the page to less than that of the wrapper width,
these browsers will let the content flow off the left and right sides evenly. This means that a horizontal scroll bar
will appear and let you scroll right to get that content, but the content sent to the left disappears and cannot be retrieved..

There is a way to fix this problem.
The easiest method is to set a minimum width on the body element that is the same width as our wrapper.

So our final markup looks like this:


<div class="wrapper"> all content goes here </div>


body {
text-align : center ;
min-width : 770px ;

div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;

There is also a method of using a border around your wrapper so you don't need the min-width property, but it introduces
another IE/Win bug and hack. For now just stick with the above it will work on all browsers under any operating system.

10-29-2005, 10:55 PM
Except Davidj did not post it, I did.

Just change margin-left and margin-right to 0% to make your page full width.


Creative Insanity
10-30-2005, 12:09 AM
Opps sorry gm.. my mistake. hehe

10-30-2005, 01:54 AM
Hey thanks guys Ima give that a shot ;)