Geek Answers Handbook

How to make form and div have maximum width of children

I was wondering how to make the form and div have the maximum width of the children. For example, in this example, both the form and the outer DIV stretch the entire width of the page. I would like the shape and outerDiv to be 200 pixels wide.

This becomes a problem when I have this page in an iframe, because the page width is larger than the iframe. I get a horizontal scrollbar.

<body> <form name="myForm" method="post" action="#" > <div id="outerDiv" > <div style="width: 200px"> Both the form and outer div stretch 100%. I am wondering how I would get them to wrap tightly around the inner div. </div> </div> </form> </body>

Thanks for your time and help.

+4
source share
3 answers

I believe the “right” way is to make them inline elements:

 style="display: inline;"

divs are block elements and fill their container, spans are inline elements and are compressed to fit their contents.

You can use spaces as containers or just add this style to your divs.

Good luck

+4
source

To make a block display like an inline element, you can use

 display: inline-block;
+7
source

To prevent scrollbars for #outerDiv , you can set the maximum width and overflow properties:

 #outerDiv { max-width: 300px; overflow: hidden; }

This way you do not guarantee any scrollbars, and I assume that the width of the iframe will never be more than 300 pixels. Also do not forget to set frameborder="0" in the iframe and check the fields on the body of the included html.

+1
source

More articles:


All Articles