Simple CSS puzzle?

[Aron Daburn]

I have a div with two spans in it. I need the first span to align left within the div, and the second span to align right within the div. I have tried everything I could think up to try and nothing seams to work. What do I need to do?

Say the following HTML

<div class="label-input-pair">
    <span class="form-label">First Name</span>
    <span class="form-input"><input type="text" id="fName"/></span>
</div>

Then the .CSS file is

.label-input-pair
{
    width:300px;
}

.form-label
{

}

.form-input
{

}

What do I need to fill in the CSS to get it such that all of the 'form-label' spans align left, and all of the 'form-input' spans align right within the div.

[Bauke Scholtz]

You may find this useful: http://www.alistapart.com/articles/prettyaccessibleforms

Here are another examples:
http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/
http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
http://www.sitepoint.com/article/fancy-form-design-css/

[Aron Daburn]

If only the style sheet is accessible, is this possible to do?

[Bauke Scholtz]

Just apply the desired styles on the desired elements/classes.

[Anuj Troy]

hi

i wish i had a board to express my thoughts but i will try to do the same with words..

imagine the div to be a rectangular box of 300px width. now you want to place two more smaller boxes inside (you used spans, but i would recommend divs). lets call the boxes as A and B. width of box A=B=150px.(this could vary according to your need)

inside box A you want to write FirstName and inside box B you want to write LastName. Put the first and last name in spans.

Divs are Block element that is they have a new line before them and after them by defualt. so if you put two divs together they will lie on top of each other. but if you change the display style to inline then they behave as inline element and will be next to each other.

What i would do is :

<div class="label-input-pair">  
    <div class='BOX_A' align='left'><span class="form-label">First Name</span></div> 
    <div class='BOX_B' align='right'><span class="form-input"><input type="text" id="fName"/></span></div>  
</div> 


.BOX_A,
.BOX_B
{
display:inline;
}

do let me know if it worked for you.

[Eric Pascarello]

YOu can always attach an image.

Shouldn't you be using a <label for="elemName">

You should be using float, not inline.

Eric

[Aron Daburn]

I figured it out. It seams a little silly having the solution, but for some reason I just wasn't coming up with it. On the first span I just set its width to give the proper spacing to move the other span to the right. Thanks for the help guys