CODEWITHSUNDEEP
cssformshtml
Guybrush
Guybrush

Reputation: 1611

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?

Upvotes: 1

Views: 367

Answers (2)

Andrew
Andrew

Reputation: 1989

When an element is floated, it is removed from the structure of the html. If every element inside another element is floated, the containing element thinks it is empty and will display with no height. The floating elements inside are still displayed though, and they still push the next elements further down the page. This causes the first element without floated elements to think it starts at the top of the page.

The solution is simply add an empty div before your #reqmsg like so <div style="clear: both"></div>

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

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.

Upvotes: 2

Related Questions