0

I have a DIV that is 875 pixels wide. It begins on the left margin of the page. Its CSS class is

.three-column

    {
        width:875px;
        float:left;
    }

Inside that DIV is another DIV. This DIV contains the label and a field described below. I want these DIVs to start in the upper left corner of the main container and flow left to right, and after then to the next line. This works with the CSS inlcuded. Its CSS class is

.LabelAndField
{
    width: 240px;
    margin-left:auto;
    float:left; 
}

Here is the CSS for the field (the input box)

fieldset input[type="text"].editor-field-score
{
    border: 1px solid #cccccc;     
    font-size: 1.0em;
    font-weight: 600;   
    padding: 5px;
    margin-right : 20px;
    float : right;
    width : 50px;
    text-align: right;
}

Here is the CSS for the label

fieldset .editor-label-score 
{
    float:left;
    font-size: 1.0em;
    font-weight: normal;
    padding-right: 10px;
    margin :10px 0px 0px 0px;
    color: #9900CC;
    text-align: right;
}

I want the input box to be right justified in the LabelAndField DIV. Then, I want the label to abutt the input box. Any extra space due to shorter text labels should appear to the left of the label. How do I do this?

1 Answer 1

0

text-align: right; will do it, but this applies to children , no the element itself

fieldset .editor-label-score 
{
    float:left;
    font-size: 1.0em;
    font-weight: normal;
    padding-right: 10px;
    margin :10px 0px 0px 0px;
    color: #9900CC;
    text-align: right;
}

that is fine just do it like this

<fieldset class="editor-label-score">
     <a>description of TxtBox</a>
</fieldset>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.