Hi

I'm trying to get the labels of my form to appear above their input boxes and for the input boxes themselves to be side by side (basically a horizontal login form)

I've used the label tag in my form after doing some research which looks like:

<form> 
<label for="email">Email</label> <br /> 
<input type="text" name="email" /> 
<label for="password">Password</label> <br /> 
<input type="text" name="password" /> 
</form>

In my CSS I have a label property defined as:

label { 
display:inline-block; 
}

But the outcome is this:
http://i56.tinypic.com/10r0c1s.png

Could anyone please shed some light on my problem?

Thank you

Solved

HTML

<form>
<div class="group">
<label for="email">Email</label> <br />
<input type="text" name="email" />
</div>

<div class="group">
<label for="password">Password</label> <br />
<input type="text" name="password" />
</div>
</form>

CSS

.group{
display: inline-block;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.