Read more (button) - position absolute bottom not working

HTML & CSS
1

Hi guys,

I have this DIV with inside the image on the left side and the content on the right side. I have this black read-more button but for some reason it is not staying at the bottom of the DIV… it is moving when i try to absolute the item…

Can somebody help me?

image:
http://s30.postimg.org/57lc8citc/Screen_Shot_2015_03_18_at_15_43_49.jpg

URL:
http://dev.alveos.nl/boris-case/

Class:

#spotlight a.more-info { color: #000; background: #000; position: relative; bottom: 0; left: 0;  width: 80px; height: 80px; text-align: center; margin: 0 auto; display: block;}

<div class="row">
<!-- Read more button -->
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" class="more-info"><i class="fa fa-chevron-down"></i></a>
</div>
2

You have it as position:relative, not absolute.

3

Hi there @Ryan,

I have tried absolute but the button will move all the way op to the header…

4

Make it absolute

Then, figure out what parent you want it to be the bottom of. Is it the .row{} element you want it to be the bottom of? Position wise? Then make sure whatever parent you want it at the bottom of has position:relative;

I couldn’t find th read more button on your page otherwise I’d be more specific.

5

Refresh the page now, you will see the read-more button in the center of the content. I have tried making the DIV container of that element absolute, but still no luck.

<!-- Spotlight -->
<section id="spotlight">
<div class="row">

<div class="box">

<?php $query = new WP_Query(array('post_type' => 'wpa_spotlight', 'posts_per_page' => 1));  ?>
<?php if($query->have_posts()): global $more;  ?>
<?php while($query->have_posts()): $query->the_post(); $more = 0; ?>

<div class="col col-lg-4 col-md-4 col-sm-8 col-xs-8 equal-content">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php echo wp_get_attachment_image( get_post_thumbnail_id(), 'medium' ); ?>
</a>
</div>

<div class="col col-lg-4 col-md-4 col-sm-8 col-xs-8 equal-content">
<div class="content">
<h2><?php the_title(); ?></h2>
<p class="date"><?php echo get_the_date('d.m.Y'); ?></p>
<p><?php the_content(''); ?></p>
</div>

<div class="row">
<!-- Read more button -->
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" class="more-info"><i class="fa fa-chevron-down"></i></a>
</div>

<?php endwhile; ?>
<?php endif; ?>

</div>
</div>
</section>
6

It’s still not absolute. but I see where it is now.

Ok now please take a screenshot, and draw a box of exactly where you want it.

7

http://dev.alveos.nl/proef/wp-content/uploads/2015/02/Boris_Case_1.png

See this image scroll down to the section… you will see the read-more button on the bottom of that div element doesn’t mather how long the message is the button should stay at the bottom.

Thanks Ryan.

8

Ok so on this element with these classes “col col-lg-4 col-md-4 col-sm-8 col-xs-8 equal-content”

It’s a div. Find that exact element. Position:relative needs to go on that.

Then put these coordinates on the .more-info button

bottom:0;right:0;left:0;

9

I have tried it. Created a new class added it next to the equal-content named " more-info-container" with position relative, and the button: bottom:0; left: 0; right: 0; still not working.

Can you check?

10

No, undo what you just did.

Please do as I ask. I asked for that specific parent to get position:relative;

Then I asked for the button to be absolute, with the bottom/right/left set.

Please do what I suggest.

11

Works like a charm :smile: thanks Ryan!!

12

Anytime!

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.