Achieving a fixed position within a div using CSS

Is there a way to arrange elements inside a div without modifying the HTML code? Yes, CSS can help you achieve this.

Consider these blog posts: https://i.sstatic.net/7yTQ5.png

The issue at hand is that the 'Read more' button gets pushed down when the title or content of the post is too long. To fix this, you want the button to always remain fixed at the bottom of the blog post, similar to how it appears in the second post.

Here is the snippet of code currently being used:

<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 experimented with position: absolute and relative, but unfortunately, they did not solve the problem at hand.

Answer №1

To ensure proper positioning, it is advisable to restrict the height of the loop-entry-content:

.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>

Answer №2

To ensure your button remains in a consistent position, consider setting a specific height within the CSS for the "loop-entry-content" class

Answer №3

Consider incorporating the following CSS code:

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

Implementing this should yield the desired results.

Answer №4

To fix the height issue, you can utilize flexbox in CSS on the parent element (either the parent itself or a specific named class).

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AJAX for showcasing the data from an XML document

Our professor gave a brief explanation of AJAX, expecting us to showcase the data from an XML file in a scrollable text area on our website. Unfortunately, I am facing issues with loading the XML file into the designated div area. Any assistance or suggest ...

Solve the issue with the horizontal scrollbar in Internet Explorer 7

The appearance of a horizontal scroll on this site in ie7 is quite puzzling. It functions perfectly in all other browsers, so I'm at a loss as to why this issue specifically arises in Internet Explorer 7. Any help in solving this problem would be grea ...

The functionality of JQuery fails to work properly when receiving an AJAX response

I have separated my code into three main sections: a PHP file, a jQuery section with an AJAX function that requests data, another PHP file. The response from the AJAX request is HTML that needs to be added at the beginning of a specific DIV inside the i ...

When you apply margins in CSS and HTML, it can cause elements to break out of the row alignment

I'm struggling with my html code that contains elements arranged in rows: <div class = "row"> <div class="col-sm-3 cont-box"> <h1>Title1<h1> </div> <div class="col-sm9 cont-box"> <img src="onepic.jpeg" class=" ...

How can you display '<>' characters in a QLabel and set text accordingly?

In my PySide2 (similar to PyQt5) project, I am facing an issue with setting text in a QLabel that includes characters like '<' and '>'. These characters seem to disappear because they are used for font modifications. I have tried ...

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips

I have a long list of data consisting of 30-50 rows, each row needing its own distinct tooltip. Creating unique IDs for each row would require unnecessary JavaScript code. My goal is to utilize jQuery to retrieve the tooltip from the nested <DIV> wit ...

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories. My goal is to display one icon for parent categories and a different icon for child categories. I have tried the following ...

Determine whether the browser is being used on an Android or iOS device

Is there a dependable method to alter buttons and text on a mobile site based on whether the user is using an Android or iOS browser? ...

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

Guide on deleting files from WordPress Media Library directly using PHP in the frontend

I have searched various sources while creating my current code, but I have yet to find the answer to this question: Link 1 Link 2 Link 3 Link 4 Creating a file management system where admin access is restricted from WordPress. They will manage files th ...

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

After successfully displaying the generator over the first image, I encounter a problem with the second and third images where it seems to disappear. However, upon cycling back to the first slide, the generator reappears with a different quote. I've a ...

Using both PHP and HTML to create a select tag

I'm new to PHP and HTML and I'm trying to create a form with three drop-down lists (select tags). However, when I select an option from one list, the values in the other two lists disappear. Should I save the selected values when submitting the f ...

(jquery) Show or Hide One Dropdown Element Singularly

I'm currently working on creating a mobile side navbar that features dropdowns with additional links. One issue I'm facing is trying to set it up so that when a link in the navigation is clicked, only the corresponding dropdown activates. At the ...

Send a bundle of data through AJAX requests

An issue has been encountered on an HTML/PHP page named sucessful.php where a variable job_id passed from another page is not being received by the destination page interview.php. The problem arises when attempting to transfer two variables and their corr ...

How to use jQuery to hide radio buttons that are not checked when clicking a submit

Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button. <form method="post"> <input type="radio" name="radiobtn"> <label for="first">Fir ...

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...

Utilizing CSS to Create Fixed Position Elements

How can I create a CSS Style with a fixed position property for a div? When I place this particular div inside another div containing text, the fixed-positioned div overlaps the text, causing it to be hidden. I want to align the text and image divs next ...

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...