I have an input box, want text to be just below it

Question

Hi,

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

You can make it higher by applying this:

.class { position: relative; top: -5px; }

or you can reduce the line height:

.class { line-height: 10px; }

You have to have the clear: both in order to make it go to the next line, but because it is a new line, the line-height property applies. Reducing the line height should make it higher, and if it isn't close enough, try positioning it relatively.

Answer 2

You probably have padding on the "instruction". Relevant html and css maybe?

Answer 3

Well it all depends on what HTML tags your placing the text within. Each element has a default behaviour.

A DIV element will display as a block. As such it will display on the following line in the natural flow of the HTML in the page. It will also cause all the HTML that comes after it to be displayed below it.

A SPAN element will not be displayed as a block. In fact it provides no visual change by itself with no CSS applied to it. A SPAN element is simply displayed inline and everything just flows around it like normal.

You can use CSS styles to modify the layout behaviour of HTML elements.

For example, you can specify that a DIV element be displayed left or right of the HTML content by using float:left or float:right. You could then use the CSS clear:both to specify that an element should be displayed below all floating content.

So, in your case, if you remove the clear:both style, then the element will no longer be displayed below floating elements and this will cause your elements to be rearranged.

-Frinny

Answer 4

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.