Auto resize div when resizing browser

Question

In my page, I have a form inside a div. When I resize the browser, some parts of the form won't be seen and scroll bars will appear. How can I do it in css wherein after resizing, the whole form will still be visible without having to use scroll bars?

Answer 1

Use "%", not "px", "pt", "em" or whatever constant size, when creating such properties, like width.

For example, #element: width:80%; will make the "element" be 80% in width of it's parent element. And if the parent element is body, it will automaticly change it's width together with the browser window width.

If some child of "element" will have constant width, the minimum width of an "element" will be the same size as this child.

I hope my answer was helpfull.

Answer 2

Have you tried setting the forms element heihgt and width properties equals to 100% into your CSS file?

<div style="background:gray;width:100%;height:100%">
   <form id="id_form" style="background:orange;width:100%;height:100%">
        <input id="id_send_button" type="button" value="click me..." />        
        <!-- more controls -->
   </form>
</div>

Also consider the positioning property it can be: static, relative, fixed or absolute.

Answer 3

If you use width:100%; to div, It can resize div when resizeing browser. so you may need to set div width 100%. don't use any fixed with or min-width or max-width to div.

It may help to understand. http://www.templatespoint.com/blog/2010/10/set-web-page-width-to-monitor-width/

I hope it may help

Answer 4

If you use percentual positioning for all your elements, then what you want is possible. Take a look at this example: jsFiddle percentual sizing

note: I think nothing is wrong with scrolling (vertical scrolling that is, horizontal scrolling is a real pain!). People are used to vertical scrolling, so why do you need this specific behaviour?