CODEWITHSUNDEEP
javascripthtmlcssjsp
Oneb
Oneb

Reputation: 395

how to make the webpage follow the size of the browser window and when resized, the layout does not get distorted?

I am currently working on a webpage and I have achieved fitting it in the whole browser window by using percentage(%) values in the width and height properties of my css. The problem now is that when I resize the window, everything gets scrambled and distorted (e.g labels,links, etc.) Is there a way to have a minimum height and width so as when the window is resized, there is a limit those properties to prevent the layout being distorted?

Thanks is advance!

Upvotes: 1

Views: 2584

Answers (2)

sunn0
sunn0

Reputation: 3046

Check out the css properties min-height:

http://reference.sitepoint.com/css/min-height

and min-width:

http://reference.sitepoint.com/css/min-width

You may also look into a simple css framework like StackLayout:

http://stacklayout.com/

Upvotes: 0

John Conde
John Conde

Reputation: 219894

You actually answered the question yourself. You can use the CSS properties min-width and min-height to set minimum width and height, respectively, for a block level element like a container.

A better solution would be to use responsive design, though, which will continually adjust itself as the window grows and shrinks.

Upvotes: 3

Related Questions