Avatar of garethtnash
garethtnashFlag for United Kingdom of Great Britain and Northern Ireland asked on

<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>

Open in new window


Thanks
CSSHTMLCOBOL

Avatar of undefined
Last Comment
garethtnash

8/22/2022 - Mon
jej07

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

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

You can remove the clear div and add overflow:auto to your container.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
COBOLdinosaur

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Chris Stanyon

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!
ASKER
garethtnash

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.