CSS margin problem

Question

I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.

Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?

You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/

I'm not sure if I understand your question. You want to center the label tag with the ID "label" ("Your Message Has Been Sent")? — Soundlink
– Soundlink, Commented Aug 15, 2010 at 15:54
@Soundlink, I want some spacing between the input element "Type 'Yes I am human'" and "Your Message Has Been Sent". If you notice, there's no spacing between them. I tried to add margin-top to the label element, but it made no difference. — input
– input, Commented Aug 15, 2010 at 16:05

Yi Jiang · Accepted Answer · 2010-08-15 16:24:35Z

The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.

However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).

Edit

Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.

http://www.jsfiddle.net/SNrtA/

Thank you! I have never actually read a tutorial on contact forms using lists, it's always mostly the divs. Your solution of adding overflow:hidden worked! Thanks for the great pointers as well. Will surely keep that in mind. You were a great help. :)

Matt · Accepted Answer · 2010-08-15 16:33:28Z

To center you could add a parent container

<div id="parent"> <label id="label">Your Message Has Been Sent</label> </div> div#parent { text-align:center; }

or add an id to your original parent div to target it with above css

with regards to the margin, you seem to have an issue with a float:left being set in the

div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?

Collectives™ on Stack Overflow

CSS margin problem

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related