CODEWITHSUNDEEP
csshtml
input
input

Reputation: 7519

CSS margin problem

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/

Upvotes: 1

Views: 168

Answers (2)

Matt
Matt

Reputation: 2790

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?

Upvotes: 0

Yi Jiang
Yi Jiang

Reputation: 50095

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/

Upvotes: 3

Related Questions