CODEWITHSUNDEEP
htmlcss
discodowney
discodowney

Reputation: 1507

Cant see why my CSS isnt working

So ive started learning Web stuff. Im learning Javascript and HTML and CSS. I have made a small web page. Most of my css works fine but I cant see why the very last one isnt working for me.

My HTML for the person-row class is

<div class="person-row">
    <img src="images/avatar1.png">
    <div class="person-info">
        <div>Catalina</div>
        <div>sports, pets, party</div>
        <button>Add as a friend</button>
    </div>
</div>

Then in my css I am trying to get the button to show up on the right of the row so I have

person-row > button{
   float: right;
}

But the button isnt on the right. Can anyone tell me where I might be going wrong?

Upvotes: 1

Views: 92

Answers (1)

Jim Speaker
Jim Speaker

Reputation: 1332

The reference being specific to a sibling descendant is pretty specific, but it works if it references the correct parent as mentioned in the comments.

Also, there is no . in front of the class identifier as someone mentioned.

Here's the corrected fiddle:

http://jsfiddle.net/ty6cyxvo/

Which contains:

<div class="person-row">
    <img src="images/avatar1.png" />
    <div class="person-info">
        <div>Catalina</div>
        <div>sports, pets, party</div>
        <button>Add as a friend</button>
    </div>
</div>

and

.person-info > button{
   float: right;
}

Upvotes: 2

Related Questions