Guybrush Guybrush - 10 months ago 51
CSS Question

Crazy behavior with div inside Form

I am new with CSS + tables and need some help.

Here is my form:

<form id="form" name="form" method="POST" action="contact.asp" accept-charset="utf-8" style="width:540px;">
<div>
<label for="name">
<span class="requ">Name:</span>
<input type="text" name="name" style="width:180px;">
</label>
<label for="email">
<span class="requ">E-mail:</span>
<input type="text" name="email" style="width:316px;">
</label>
</div>
<div>
<label for="message">
<span class="requ">Message:</span>
<textarea name="message" rows="8" style="width:518px;"></textarea>
</label>
</div>
<div id="reqmsg"><strong>Important!</strong> Fields with asterisk are required!</div>
<div id="buttons">
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear">
</div>
</form>


And here is the CSS:

#form { padding:0; margin:0 auto; }
#form label { float:left; padding:0; margin:6px; font-family:Arial, Helvetica, sans-serif; }
#form label span { display: block; margin-left:2px; font-size:12px; font-weight: bold; color:#5C5C5C; }
#form label span.requ { background-image:url(../images/required.png); background-repeat:no-repeat; background-position:right 5px; }
#form input { border:1px solid #939393; border-radius:6px; font-size:14px; background-color:#F8F8F8; }
#form input[type="text"] { padding:4px; color:#0067CE; }
#form select { padding:3px; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; cursor:pointer; }
#form textarea { padding:4px; font:normal 14px Arial, Helvetica, sans-serif; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; }
#form input[type="submit"] { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #0062C4; border-radius:6px; background-color:#00A0DD; cursor:pointer; }
#form input[type="reset"] { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #707070; border-radius:6px; background-color:#9F9F9F; cursor:pointer; }
#form #reqmsg { display: block; padding:0; margin-top:10px; font:normal 12px Arial, Helvetica, sans-serif; color:#5C5C5C; text-align:center; border:1px solid #000000; }
#form #buttons { display: block; padding:0; margin-top:10px; text-align:center; border:1px solid #000000; }


The problem I have is with the div "reqmsg". I used a border to check the problem, and it englobe all the form. I would like to have this div separated, so I can define a top and bottom margin. The same with the "buttons" div.

Any suggestions?

Answer Source

The problem is with the floating <label> elements. You need to clear your floats otherwise your layout issues will persist.

I have created a JsFiddle with an example of clearing by adding .clear {clear: both;} as a CSS class and applying <div class="clear"></div> to the appropriate areas.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download