View Full Version : Help With A Stretch Page...

08-22-2005, 10:29 PM
Here's What My Site Looks Like Not Stretched:


Here's What My Site Looks Like Stretched:


Here's What I Want My Site To Look Like Stretched:


This Is My First 'Non-Amateurish' Site That I Have Actually Coded Entirely Myself, I Was Wondering If Anyone Had Any Ideas/Tutorials On How I Could Fix This Problem?

08-23-2005, 06:48 AM
They all look the same to me.

08-23-2005, 12:01 PM

I don't know what you mean by stretched. Do you mean that if the window is narrowed, that your site will narrow as well (ie, your site is fliud)?


08-23-2005, 09:05 PM
Yeah, Fluid Is What I Mean. I Couldn't Think Of The Right Word.

08-24-2005, 07:44 AM

08-24-2005, 02:47 PM
well, your examples don't help me much with undertsanding your difficulty because as said by jscheuer1, "they all look the same to me". OK the third is different (thinner), but I don't fully understand how they describe this 'problem'.

It looks like you have this page built within a table :rolleyes:, which if so, is why it has the whitespace on each side. If you use the window as the container, then use floating 'divs' you'll begin to see how to design a fluid, or more fluid, site. As the resolution becomes changed by the user, the floating divs can always position themselves relative to the sides of the window.

nothing against tables but, leave them out of normal web design and you'll gradually find coding easier. That's my experience anyway, and I'm nothing like expert as other guys here.


08-24-2005, 05:37 PM
Okay Thanks, Someone Else Told Me To Try Tables And It Didnt Seem To Work, I Will Research Some Fluid Tuts. :)

08-24-2005, 05:55 PM
don;t forget to make sure you have a DOCTYPE at the top of your html file. Then the browser will know what way you want it to present the page, rather then it thinking it knows what you want it to do. see the sticky at the top of this forum.

Also your fluid divs could layout like...


<div id="first">stuff here</div>
<div id="second">stuff here</div>
<div id="third">stuff here</div>


Then tell the div how to behave with CSS like

#first {
float : left;
width : 25%;
background-color: #aaaaaa; /* the darker grey one */

#second {
float : right;
background-color: #cccccc; /* the lighter grey one*/
width : 25%;

#third {
margin : auto auto;
width : 40%;
background-color: #ffff80; /*the other colour */

That should give you three boxes of differing shapes in your page of two shades of grey and one of (I think), red.
not tested but I think it should give you the idea of how to CSS and of the simplicity of the html structure when used with CSS