CSS3 Scale div after browser size Options

[D4NN3]

Hi!

I'm trying to make a personal website for myself. And I have a problem. I need it to look good at all resolutions. Is there any way for me to make a div container that's 100% width, and it will automatically change the height to be the same proportions. And then I want all the containers inside to change so the website will look the same on all resolutions. Is there any way to do it?, Is there any way to do this on my website, here's the code.

1366x768 screen

1920x1080 screen

I want to make so it look like 1366x768 screen on all screens (but a little bigger). So all the elements are bigger on bigger resolution screens and smaller on smaller resolution screens. It's okay for me if I would need to make the whole site from the beginning. As long as it works on all screens.

[pandy]

What if the user doesn't use a maximized browser window? I don't understand how it would look the same. Are you going to change the text size too according to screen size?

[Christian J]

I need it to look good at all resolutions.

It should also work in different browser window sizes. For example, people with high resolution screens may make their browser window narrower than the available screen size, perhaps even taller than its wide.

Is there any way for me to make a div container that's 100% width, and it will automatically change the height to be the same proportions.

Perhaps, but in a tall narrow window such a design would become very small. It's better to let the content reflow to fit both different sizes and width/height ratios of the browser window.

[D4NN3]

I just realized it wasn't the best explanation. Like make a div, with all the content on the site. What I meant was. If I have a div that's 100 px wide. And inside that div I have another div that's 50 px. Then if I open a browser window that's 200 px wide. The first div would be 200 px instead and the second div would be 100 px. But I want all of it to be in the same place just bigger. It doesn't matter how much space it will take in height only in width so it fits on every computer screen and look the same.

[pandy]

Give the inner DIV a width of 50%. You don't need to give the outer DIV a width. It will stretch to fill the full width anyway. Just keep doing all widths in percent and let the heights scale.

[D4NN3]

I solved my problem by using a background image instead.