CODEWITHSUNDEEP
htmlcss
user2892178
user2892178

Reputation: 61

Applying CSS to single div class/id

I'm having trouble containing CSS to a single div without scrambling everything. I'm trying to get hospital/name/title/dep on seperate lines(vertical) with aligned text boxes then the other sections on the same line respectively(horizontal)

Any help would be greatly appreciated

<div class="main" id="boxalign">
            <p>
                <label>Hospital:</label> <input type="text"/><br>       
                <label>Name:</label> <input type="text"/><br>
                <label>Title:</label> <input type="text"/><br>  
                <label>Department:</label> <input type="text"/><br>
            </p>
         </div>

CSS

#boxalign, label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;

}

Not sure if my problem really shows with the code above so heres all of in jsfiddle: http://jsfiddle.net/f8qa2/

Upvotes: 1

Views: 123

Answers (5)

ajc
ajc

Reputation: 1725

remove the unceccesary "," from the css selector.

Hope that helps.

Upvotes: 0

Dominic Green
Dominic Green

Reputation: 10260

I think you just have a rouge , and your p and label are the wrong way round in your selector.

Try 

#boxalign p label{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}

Example here

Upvotes: 0

DAC84
DAC84

Reputation: 1274

Your selector is wrong. It should be #boxalign p label {}.

label and p are round the wrong way based on your HTML.

Upvotes: 0

Chris Pickford
Chris Pickford

Reputation: 8991

I think your CSS selector is malformed, try this instead:

#boxalign label p {
    display: inline-block;
    float: left;
    clear: left;
    width: 70px;
    text-align: right;
}

Also, rather than use <br>s to break lines, put each <label>/<input> pair in it's own <p>:

<div class="main" id="boxalign">
    <p>
        <label>Hospital:</label>
        <input type="text" />
    </p>
    <p>
        <label>Name:</label>
        <input type="text" />
    </p>
    <p>
        <label>Title:</label>
        <input type="text" />
    </p>
    <p>
        <label>Department:</label>
        <input type="text" />
    </p>
</div>

Fiddle

Upvotes: 2

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

I don't think you meant to put that comma there, everything looks good without it.

#boxalign label p{
    display: inline-block;
    float: left;
    clear: left;
    width: 70px;
    text-align: right;
}

Link

#boxalign, label p Means that you want to target elements with the id boxalign and p tags within labels.

#boxalign label p Means that you want to target p tags within labels with a parent element with the id boxalign.

Upvotes: 1

Related Questions