Webpage Resizing for Browsers

[kaetar]

Hello everyone,

I am currently working on a website for a literary journal that I work for called The Broome Street Review. Currently, we use Wix for the website, but we would like to move away from that and design ourselves. I have been teaching myself HTML and CSS and I am running into some problems with having the window resize when the browser resizes. If you go to broomestreetreview.com now and look at the Wix page, when you resize your browser everything on the page resizes with it. I know that they are using flash and javascript and that with html and CSS I probably won't be able to do it as elegantly, but I would like to try.

So far, I have built the background of the first page past the welcome page. I have made it so that the background is in a div which resizes with browser size and keeps its aspect ratio pretty well - the problem is, I can't seem to get any other objects to relate to that div's resizing. I have tried putting div's inside the container div, using AP Divs, and just inserting images into the div and then trying to get them to resize. I spent a long time trying to get text to resize when the browser window resizes and could not accomplish that either. I have spent roughly the last 20 hours on the internet looking for help, but couldn't find something that matched my problem - Anyone have any ideas? I can post the code that I have so far if anyone needs.

My one idea is that I have been thinking of using media queries - but it seems like for a media query to accomplish that smooth resizing I would have to make about 50 media queries and rewrite my entire CSS sheet for each one.

Thank you for any help.

[floatingDivs]

There is a neat way to get around having to use dozens upon dozens of media queries.

Use one media query (check if window size is less than 800px wide [for instance]). If it is less than 800px wide, rather than using a set width (I'm guessing you have a width of 100px for the page), set the width to 100%.

[kaetar]

There is a neat way to get around having to use dozens upon dozens of media queries.

Use one media query (check if window size is less than 800px wide [for instance]). If it is less than 800px wide, rather than using a set width (I'm guessing you have a width of 100px for the page), set the width to 100%.

Thank you! This is very helpful. Could you give me an example of how that works? I haven't used media queries before, so I'm not totally sure how to go about using them.

My page is actually quite large, and it sizes down to smaller browsers. The biggest issue I have now is that I can't get text to resize with the browser, but I can manage to get everything else to do that - maybe media queries will be the solution for this.

So if I understand correctly, I could maybe make one media query that checked every...say...100px of browser size, and for every 100px, just set the browser size to 100% and it would resize for the size it just checked for?