How to make my site resizable?

This site is best viewed in a modern browser with JavaScript enabled.

JCKnoell

So, I have finished laying out my webpage, for the most part, but I've been using a giant mac monitor to do so. As soon as I re-size the window, everything shifts around and loses it's layout and styling.

How do I keep everything in the same place when the window is resized?

I can post my code if you like, but it would be quite long. what do you need to see in order to help me?

The website is http://www.thinkinkutah.com/whyrefill.

It's not "live" yet, so please keep this as confidential as possible.

Thanks!

Harith

First I think you should make three column website, set those columns to float:left and set there width to % value not exceeding the container div tag, and I think it will be better to put overflow value to hidden instead of auto. Hope it helps

Harith

Ow and if you want to make your video and image re-sizable than also set there width to a % value.

Major_Payne

Might help:

Choosing Dimensions for Your Web Page Layout:

Sizing (Web) components (13Jul2013): https://medium.com/p/8f433689736f
In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/
How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/t/y/l/ydlyuyd/birtthtw/h/
Care With Font Size: http://www.w3.org/QA/Tips/font-size

responsivepx – screen-size testing tool: http://responsivepx.com/

FitText.js plugin (FitText is a jQuery plugin that makes your font-sizes flexible, allowing headlines to automatically-expand to fit the available space): http://fittextjs.com/
Adapt.js - Adaptive CSS: http://adapt.960.gs/

JCKnoell

Harith;1277969 wrote:
First I think you should make three column website, set those columns to float:left and set there width to % value not exceeding the container div tag, and I think it will be better to put overflow value to hidden instead of auto. Hope it helps

Thank you for the help.

I'm still a little confused. different people are telling me to do different things. I really (bottom line) just need it to look good no matter who is looking at it on what screen. I coded it on a 1920 monitor and I guess that was my problem. Do I change everything to percentages? Do I change everything to pixels? I'm a little confused here.

I already have, more or less, a three column site, do I not? I have my sidebar, main, and sideright. Then a header and footer. The website SHOULD look like this:
https://docs.google.com/file/d/0B8XWuK8i0iJeNm9TRDY0Skw5MEk/edit?usp=sharing

There should be a left sidebar with the two images, a video in the middle with the two columns underneath it, then a right sidebar with the quotes. And a header and footer...

Harith

if u want a fixed layout, then probably set things in px, but if you want a fluid layout then set things to %.