My read more button isn't inside my borders

Question

I want my button to link to a html file I have and such. But it isn't inside the borders I set for p. Why is it doing this? When I enclose it in p it's still outside and when I put it outside p it's still beyond the border. I want the button to be at the bottom right inside the borders where the 'something something' (test words) are. What am I missing here? Also don't worry about the black circle next to the button, it's not there when the button is on the actual site.

<body>
<p class="news1">something something
<ul class="readmore">
<li><a href="#">read more</a></li>
</ul>
</p>    
<br>
</div>
</body>

And the css

p.news1 {
color: #f9a724;
text-align:left;
border-style: solid;
border-color: #f9a724;
word-wrap: break-word;
line-height: 100px;
margin-right:50px;
padding:10px;
margin-left:50px;
font-family:Lato-Light;
}

ul.readmore li a{
display: block;
position:absolute;
transition: .4s ease;
padding: 8px 25px;
color: #000000;
background: #f9a724;
text-decoration: none;
}

ul li a:hover{
color: #f9a724;
background: #000000;    
}

https://jsfiddle.net/4f6osawa

http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside — Ishimdar Ahamad, Sep 02 '15 at 06:34

score 1 · Answer 1 · answered Sep 02 '15 at 06:21

ul.readmore li a{
  display: block;
  position:absolute;
    transition: .4s ease;
   padding: 8px 25px;
    color: #000000;
    background: #f9a724;
margin-top:-85px; margin-left:295px;
    text-decoration: none;
}

score 1 · Answer 2 · answered Sep 02 '15 at 06:34

1

Try this in your css

ul {
    position: absolute;
    width: 100%;
    top: 85px;
    left: 35px;    
}

Working Demo

answered Sep 02 '15 at 06:34

Praveen Raj

1,014
1
8
12

score 0 · Accepted Answer · answered Sep 02 '15 at 06:17

ul elements are not legally allowed inside p elements.

<div class="news1">
    <p>something something</p>
<ul class="readmore">
   <li><a href="#">read more</a></li>
</ul>
<br>
</div>

css

.news1 {
    color: #f9a724;
    text-align:left;
    border-style: solid;
   border-color: #f9a724;
    word-wrap: break-word;
    line-height: 100px;
    margin-right:50px;
    padding:10px;
    margin-left:50px;
    font-family:Lato-Light;
    }

ul.readmore li a{
      display: block;
      position:absolute;
        transition: .4s ease;
       padding: 8px 25px;
        color: #000000;
        background: #f9a724;
        text-decoration: none;
    }
ul li a:hover{
  color: #f9a724;
    background: #000000;

}

Demo

How do I get it at the bottom right? I use the z-index right? — johan, Sep 02 '15 at 06:20
Took a while to find the changes you made but it makes sense now. Thanks. — johan, Sep 02 '15 at 06:51

My read more button isn't inside my borders

3 Answers3