Question

I have an input box, and I want some nice light grey text right below it (1 line instruction).

As of now the text is sitting a lower than I want in relation to the textbox (which is above it).

I am doing a clear:both, and if I remove it the next is all the way to the right of the input box.

What is wrong here?

Answer 1

Your HTML tags (for the text input and for the paragraph of text below it) all have default margin and padding. Probably the issue can be resolved by reducing the margin-bottom attribute on the text input as well as the margin-top on the paragraph. Here’s some example code.

CSS:

.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}

HTML:

<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>

Obviously, you don’t have to use classes (you could just attach to the HTML element and/or IDs), but this is the idea.

Bottom line: adjust margin-bottom on the input and margin-top on the help text.