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

Posted on 2013-08-27
Medium Priority
Last Modified: 2013-09-04
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>

Open in new window

Question by:garethtnash

Expert Comment

ID: 39441998
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.
LVL 30

Expert Comment

ID: 39442012
We would really need to see much more code. A live link to the working code would be the best way to debug.
LVL 58

Expert Comment

ID: 39442372
You can remove the clear div and add overflow:auto to your container.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 53

Expert Comment

ID: 39442457
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.


Accepted Solution

lightspeedvt earned 2000 total points
ID: 39443794
Agree with GaryC123, but I would add "overflow:hidden" to the <form>. Here is demo:
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39444038
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!

Author Closing Comment

ID: 39462848
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question