CSS label text right below input element

Question

I have input text\'s and label tags. I can\'t figure out the CSS to get the label text to align right below the input text. Here\'s a snippet of the HT

Answer 1

You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.

The simplest way is to put the label beneath the input on the html:

    
    member 1
    
    member 2
    
    member 3
        
    member 4

Then you can wrap each input/label pair with a div, and set the div like so:

    

        
        member 1
    
    

        
        member 2
    
    

        
        member 3
    
    

            
        member 4
    


#sg1 div
{
    clear: both;
    float: left;
}

Next you can put

#sg1 label
{
    float: right;
}

input
{
    display:block;
}