CODEWITHSUNDEEP
htmlcss
user2066880
user2066880

Reputation: 5034

Overlap CSS button on p element

I'm trying to place a button on top of and floated to the right of a <p> element.

Here is my attempt: http://jsfiddle.net/ZBZZU/

HTML

<p id="hello"><strong>Hello</strong></p>
<button id="button">Button</button>

CSS

#hello {
    text-align:center;
    font-size:20px;
    border:solid 2px;
    border-color:black;
    color:white;
    background-color:red;
    margin:2px;
}

#button {
    display:inline;
    float:right;
}

Upvotes: 1

Views: 2875

Answers (2)

omma2289
omma2289

Reputation: 54629

You should make the button a child of the p element and then position it absolutely

HTML

<p id="hello">
    <strong>Hello</strong>
    <button id="button">Button</button>
</p>

CSS

#hello {
    position: relative;
}

#button {
    position: absolute;
    right:0;
}

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24713

You need position: absolute

DEMO http://jsfiddle.net/kevinPHPkevin/ZBZZU/1/

#button {
    display:inline;
    position: absolute;
    top: 12px;
    right: 15px;
}

Seconmd option:

Put the button in the <p> tag

DEMO http://jsfiddle.net/kevinPHPkevin/ZBZZU/2/

Upvotes: 0

Related Questions