Stretchable Elastic Website
Using CSS to create a website can take quite a few attempts to start getting the hang of it. But hang in there, it eventually starts making sense. This article is aimed at the new CSS designer looking to easily create an elastic website that will always fill the screen regardless of the viewers screen resolution.
Over time, and with much experimentation, I’ve found that a web designer can create a website that will stretch to any resolution being used and still keep everything exactly where it should be.
A few basics to remember:
a) The need for a wrapper is no longer needed to stretch the entire page to 100%. However, a perfect example of a wrapper would be if you wanted a div to always stay against the right edge of a page, regardless of the page resolution used by the viewer. Example:
The html would look like this:
<div id=”divnamewrap”>
<div id=”divname>div content here</div>
</div>
The .css would look like this:
#divnamewrap {
height: 120px;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
}
#divname {
height: 120px;
width: 175px;
position: relative;
z-index: 0;
float: right;
}
In this case the div, (#divname) inside of the wrapper div, (#divnamewrap), is used to carry the inside div to 100%, while floating the inside div, or wrapped div to the right. This will always keep the #divname placed at the top right corner of the page.
b) All divs can be absolute positioned and placed at an X and Y coordinate on the page. Typically I will build from X0 and Y0 and use percentage for the width of the div. After some calculating, you can create the proper spacing and look on the page regardless of the screen resolution being used by the viewer. I play with percentages and keep changing my screen resolution between 800 and 1440, (or your largest resolution allowed by your monitor) until everything fits without any overlap.
However, when there is a need of two text areas side by side on a page, then the width can be fixed in pixels, and the X position can be placed by percentage. Once again, some experimentation needs to be done by switching resolutions to make sure there is no overlap at 800 x 600.
Example:
The html would look like this:
<div id=”>content seen in example here</div>
<div id=”infoarea2″>content seen in example here</div>
The .css would look like this:
#infoarea {
width: 240px;
position: absolute;
left: 34%;
top: 35px;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #660000;
text-align: left;
list-style-position: outside;
list-style-image: url(images/bullet-opt.jpg);
padding: 5px;
}
#infoarea2 {
width: 200px;
position: absolute;
left: 71%;
top: 35px;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #660000;
text-align: left;
padding: 5px;
}
A perfect example of that is seen on the Bio page in a website I created a few months back. The CSS is taken directly from the .css file and can be viewed at Charizma Photography.
I personally still design for the 800 x 600 users, because I feel there are still enough people using this resolution to make it a necessity. That of course would depend on the market you are trying to reach with your website. If you are going to be targeting users near or over the age of 50, I would highly recommend designing for 800 x 600. However, I do see more and more websites now designing for a minimum resolution of 1024.
c) Keep in mind your Z index. This is probably the most critical point. You can place a div directly on top of another div if you need to maintain an alignment of two images or possibly a navigation area over some artwork. The bigger the number, the further from the page surface the div will appear. A perfect example of this is on my personal site with the revolving world placed over the background artwork. My site URL can be found in the About the Author section at the end of this article.
With these points in mind, and some experimenting, you should be able to achieve a completely stretchable elastic website. Which I believe is the current trend in website creation. It’s amazing how quickly the fixed width website has become a thing of old. I still see fixed width sites that hold to the upper left corner and get smaller looking as the browser resolution increases, but even these are slowly fading out.
Good luck, and happy designing!
No Responses to “CSS – Create a Stretchable Elastic Website with Absolute Positioning”