Fixed position inside a div Css

Question

I need to arrange some element inside a div. The problem is that I can't modify html code, so I need to resolve it by css.

I have these blog posts:

The problem is that the 'Read more' button is shifted down when the title or the content is too long. I need the button to be fixed at bottom of the blog post, as it is in the second post.

This is the code I'm using:

<div class="contact_con blog-posts"> <div class="loop-entry-thumbnail"> <a href="http://staging.princetonpartners.com/the-magic-of-viceland/" title="The Magic of Viceland"> <img src="http://staging.princetonpartners.com/wp-content/uploads/The-Magic-of-Viceland.jpg" alt="The Magic of Viceland" title="The Magic of Viceland" width="100%"> </a> </div> <div class="loop-entry-content clr"> <header> <h2 class="loop-entry-title entry-title"> <a href="http://staging.princetonpartners.com/the-magic-of-viceland/">The Magic of Viceland...</a> </h2> </header> <div class="loop-entry-excerpt entry clr blog_loop_entry_title"> I’m part of a generation that rarely watches traditional cable news, and instead ab...<br> <span class="home_readmore home_readmore_button"><a href="http://staging.princetonpartners.com/the-magic-of-viceland/">Read more</a></span> </div> </div> </div>

I have tried with position: absolute and relative, but it not resolved this problem.

home_readmore_button to absolute, bottom 10px, right 10px, and loop-entry-thumbnail in position relative — Roy Bogado
– Roy Bogado, Commented Nov 7, 2017 at 11:52

JiangangXiong · Accepted Answer · 2017-11-07 12:02:51Z

You should limit the height of the loop-entry-content, then the absolute position will be OK:

.blog-posts { width: 33%; height: 200px; } .loop-entry-content { position: relative; height: 200px; max-height: 200px; } .home_readmore { display: block; position: absolute; bottom: 10px; right: 20px; }

<div class="contact_con blog-posts"> <div class="loop-entry-thumbnail"> <a href="http://staging.princetonpartners.com/the-magic-of-viceland/" title="The Magic of Viceland"> <img src="http://staging.princetonpartners.com/wp-content/uploads/The-Magic-of-Viceland.jpg" alt="The Magic of Viceland" title="The Magic of Viceland" width="100%"> </a> </div> <div class="loop-entry-content clr"> <header> <h2 class="loop-entry-title entry-title"> <a href="http://staging.princetonpartners.com/the-magic-of-viceland/">The Magic of Viceland...</a> </h2> </header> <div class="loop-entry-excerpt entry clr blog_loop_entry_title"> I’m part of a generation that rarely watches traditional cable news, and instead ab and instead ab and instead ab...<br> <span class="home_readmore home_readmore_button"><a href="http://staging.princetonpartners.com/the-magic-of-viceland/">Read more</a></span> </div> </div> </div>

Lígia F. · Accepted Answer · 2017-11-07 12:05:48Z

You can define a height in your content class "loop-entry-content", so your button will stay in a fixed position

Aravind Reddy · Accepted Answer · 2017-11-07 12:09:29Z

Try adding this CSS

.loop-entry-content{ position:relative; max-height:{{some desired height}}; } .home-readmore-button{ position:absolute; bottom: 10px; right:10px; }

this should work

Tilak Bhandari · Accepted Answer · 2017-11-07 12:17:27Z

You can use flex box CSS to the parent element( parent or your named class ). This will resolve the height problem.

.parent { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } <div class="parent"> <div class="contact_con blog-posts"> </div> </div>

Collectives™ on Stack Overflow

Fixed position inside a div Css

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related