asked on 8/27/2013

<div style="clear:both;"></div>

In the example below is '<div style="clear:both;"></div>' the only way to make sure that everyting within the form is displayed within the form?

<div style="width:550px; margin:10px auto;">
  <form action="" style="padding:10px; border:3px solid; border-color: #36C; background-color: #EAF7FF;">
  <legend style="font-family:Arial, Helvetica, sans-serif; font-size: 21px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dotted; border-bottom-color: #FFF; display: block; line-height: 16px; color: #003;">Lorem ipsum dolor sit ame</legend>
    <label for="email" style="width:230px; display:block; float: left; font-family: Arial, Helvetica, sans-serif; color: #36C; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies egestas magna non cursus.</label>
<div style="float:right; width: 280px; clear: right; text-align: right; padding: 5px; background-color: #006;"><input type="text" id="email" name="email" value="email" style="width:238px; /* [disabled]height: 40px; */ line-height: 40px; padding: 10px; border: 1px solid; font-size: 13px; border-color: #36C; border-radius: 3px 0px 0px 3px; color: #555;"/><input type="button" value="GO" style="width:40px; /* [disabled]height: 40px; */ line-height: 40px; padding: 10px; border: 0; font-size: 13px; font-weight: bold; color: #FFF; background-color: #3366CC;"/></div>
<div style="clear:both;"></div>
  </form>
</div>

Thanks

Last Comment

9/4/2013

8/27/2013

It's not the only way, there are several other options you could explore. For example, adding a min-height to your form might achieve a similar effect. But, it's working so I'm curious as to why your exploring different options.

LZ1

8/27/2013

We would really need to see much more code. A live link to the working code would be the best way to debug.

Gary

8/27/2013

You can remove the clear div and add overflow:auto to your container.

COBOLdinosaur

8/27/2013

That is a horrible way to layout a form. You should be using a fieldset, and the styling belongs in a stylesheet; not inline. That is just a maintenance nightmare waiting to happen.

Cd&

ASKER CERTIFIED SOLUTION

lightspeedvt

8/27/2013

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Chris Stanyon

8/27/2013

It's the form that's collapsing (because it contains the floats), so that's the one you need to add overflow:hidden to

And listen to Cd& - move that CSS out of the HTML!

garethtnash

9/4/2013

ASKER

Thanks All,

Agreed Cobol, inline styles are definately not the way to go, sorry I tend to build the design using inline, make sure I'm happy and then move all the style information to the external stylesheet.

Many thanks

&lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;

<div style="clear:both;"></div>