What is the best way to align the footer block with the image on the same horizontal line?

To create a list of news with custom CSS (without using any bootstrap or similar library) displaying an image on the left side and content on the right side, I also need to include a div with the footer-block class below the content, aligned at the same y-coordinate as the image. However, the result appears slightly different:

I initially tried adjusting the properties in the .footer-block like this:

height: 24px;
position:relative;
bottom:-24px;

But it didn't produce the desired outcome.

How can this be resolved with a cross-platform solution?

.news-block-wrapper {
  news-block-wrapper
}

.news-title {
  width: 1094px;
  height: 24px;
  top: 20px;
  left: 440px;
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
}

.news-img {
  width: 400px;
  height: auto;
  top: 20px;
  left: 20px;
  margin-right: 20px;
  /*border: 2px dotted yellow;*/
}

.news-content-wrapper {
  display: inline;
  width: 1332px;
  height: 48px;
  top: 54px;
  left: 440px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #B0B0BD;
}

.img-left-float {
  float: left !important;
}

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  position: relative;
  bottom: -24px;
}

.news-content {
  margin: 0;
  margin-bottom: 10px;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
}

.clear {
  clear: both;
}
<div class="news-block-wrapper">
  <div class="news-row">

    <img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        16=&gt;Test news Maxime assumenda natus neque.
                    </a>
      </h5>

      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.</p>
      <div class="footer-block">
        16=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
  <div class="news-row">

    <img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        2=&gt;Test news Magni vel et impedit hic.
                    </a>
      </h5>

      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore... [content truncated] ...et eum quas et nostrum labore. 
        Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente.</p>
      <div class="footer-block">
        2=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
</div>
htmlcss

Answer №1

Do you think this is the solution you need?

I have implemented the CSS properties position: sticky and top: 100% on the element .footer-block, which has caused it to be positioned at the bottom of its container.

.news-title {
  width: 1094px;
  height: 24px;
  top: 20px;
  left: 440px;
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
}

.news-img {
  width: 400px;
  height: auto;
  top: 20px;
  left: 20px;
  margin-right: 20px;
  /*border: 2px dotted yellow;*/
}

.news-content-wrapper {
  display: inline;
  width: 1332px;
  height: 48px;
  top: 54px;
  left: 440px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #B0B0BD;
}

.img-left-float {
  float: left !important;
}

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  /*position: relative;
  bottom: -24px; */
  position: sticky;
  top: 100%;
}

.news-content {
  margin: 0;
  margin-bottom: 10px;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
}
.clear {
  clear: both;
}
<div class="news-block-wrapper">
  <div class="news-row">

    <img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        16=&gt;Test news Maxime assumenda natus neque.
                    </a>
      </h5>

      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.
      </p>
      <div class="footer-block">
        16=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
  <div class="news-row">

    <img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        2=&gt;Test news Magni vel et impedit hic.
                    </a>
      </h5>

      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem...
    </div>

    <div class="footnotes">
        <p>I'm not certain if aligning <code>.footer-block with .news-content is necessary, but if it is, you can make the following adjustment:

        
.footer-block { 
   width: calc(100% - 404px); 
   margin-left: auto; 
} 


        
This modification only applies if you require the links to be at the same level as the image.

Answer №2

.container{
  display:flex;
  
}
.image img{
  width:300px;
  height:300px;
}
  .news-title {
        width: 1094px;
        height: 24px;
        top: 20px;
        left: 440px;
        font-size: 20px;
        line-height: 24px;
        color: #D4D4E1;
        text-transform: uppercase;
    }
       .news-content-wrapper {
        display: inline;
        height: 300px;
        margin-left:10px;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        line-height: 24px;
        color: #B0B0BD;
    }
    .news{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
<div class="container">
<div class="image">
<img src="https://loremflickr.com/860/640" alt="Test news Maxime assumenda natus neque.">
</div>
<div class="news-content-wrapper news">
<div >
            <h5 class="news-title">
                <a href="">
                    16=&gt;Test news Maxime assumenda natus neque.
                </a>
            </h5>
            
            <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. Libero sit quae fugit sequi. Eum consequuntur delectus magni fugit adipisci. Consequatur velit consectetur omnis inventore tenetur. Voluptas nesciunt voluptatem perferendis consequatur fugit id sit magni. Cupiditate dolor modi ipsum eum similique. Neque vitae minus vel velit dolores blanditiis porro. Occaecati odit sequi et ut dolore autem.
            </p>
            
</div>

            <div class="footer-block">
                16=&gt;Links
            </div>
        </div>
</div>

Answer №3

I rearranged the layout by moving the footer below the content and eliminating the bottom property, resulting in a cleaner appearance.

.news-block-wrapper {
  news-block-wrapper
}

.news-title {
  width: 1094px;
  height: 24px;
  top: 20px;
  left: 440px;
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
}

.news-img {
  width: 400px;
  height: auto;
  top: 20px;
  left: 20px;
  margin-right: 20px;
  /*border: 2px dotted yellow;*/
}

.news-content-wrapper {
  display: inline;
  width: 1332px;
  height: 48px;
  top: 54px;
  left: 440px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #B0B0BD;
}

.img-left-float {
  float: left !important;
}

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  position: relative;
}

.news-content {
  margin: 0;
  margin-bottom: 10px;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
}

.clear {
  clear: both;
}
<div class="news-block-wrapper">
  <div class="news-row">

    <img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        16=&gt;Test news Maxime assumenda natus neque.
                    </a>
      </h5>

      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. 
      </p>
    </div>

    <div class="clear"></div>
      <div class="footer-block">
        16=&gt;Links
      </div>
  </div>
  <div class="news-row">

    <img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        2=&gt;Test news Magni vel et impedit hic.
                    </a>
      </h5>

      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus...
      </p>
    </div>

    <div class="clear"></div>
      <div class="footer-block">
        2=&gt;Links
      </div>
  </div>
</div>

Answer №4

I highly recommend incorporating display: grid; and display: flex into your web development projects to enhance responsiveness.

If you're facing a specific issue, there's a simple solution that involves tweaking your CSS without altering the HTML structure.

The key adjustments I made are:

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
  position: relative;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  position: absolute;
  bottom: 0;
}

Here is the revised code snippet for better visualization:

.news-block-wrapper {
  news-block-wrapper
}

.news-title {
  width: 1094px;
  height: 24px;
  top: 20px;
  left: 440px;
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
}

.news-img {
  width: 400px;
  height: auto;
  top: 20px;
  left: 20px;
  margin-right: 20px;
  /*border: 2px dotted yellow;*/
}

.news-content-wrapper {
  display: inline;
  width: 1332px;
  height: 48px;
  top: 54px;
  left: 440px;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #B0B0BD;
}

.img-left-float {
  float: left !important;
}

.news-row {
  margin-bottom: 20px !important;
  border: 2px dotted yellow;
  height: 100%;
  position: relative;
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  position: absolute;
  bottom: 0;
}

.news-content {
  margin: 0;
  margin-bottom: 10px;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
}

.clear {
  clear: both;
}
<div class="news-block-wrapper">
  <div class="news-row">

    <img src="https://loremflickr.com/860/640" class="img-left-float news-img" alt="Test news Maxime assumenda natus neque.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        16=&gt;Test news Maxime assumenda natus neque.
                    </a>
      </h5>

      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum. 
      </p>
      <div class="footer-block">
        16=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </div>
  <div class="news-row">

    <img src="https://loremflickr.com/640/360" class="img-left-float news-img" alt="Test news Magni vel et impedit hic.">

    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">
                        2=&gt;Test news Magni vel et impedit hic.
                    </a>
      </h5>

      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo....
      </p>
      <div class="footer-block">
        2=&gt;Links
      </div>
    </div>

    <div class="clear"></div>
  </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

Image embedded in dash dbc.Button fails to appear

I am currently working on a dash form to capture user passwords. My goal is to include an icon that enables users to view their input as plain text rather than hidden. The approach I have taken involves creating an InputGroup with both an input field and a ...

pythoncssbootstrap-4font-awesomeplotly-dash

Differences between Bootstrap 5 gutter and margin

I have a question that I'm struggling to understand. I've been looking at the Bootstrap v5 documentation and noticed a lot of changes from v4, particularly regarding gutters. Could someone please clarify the difference between using gutters and ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Transferring information from an HTML form to PHP

Attempting to transfer information from HTML to PHP. The following is the code in my HTML file: <div class="content"> <form action="email-script.php" method="post"> <div class="contact-form mar-top30"> <label> < ...

phphtmlpost

What is the best way to extract specific keys from a PHP JSON object?

I would like the PHP function to generate a list of keys where the value is equal to or less than a specified variable. <?php $t = 35; $jsonobj = '{"ABC":35,"DEF":36,"GEH":34}'; $obj = json_decode($jsonobj); ...

phphtmljsonajax

designing a corner tab element

I'm aiming to create a triangular button in the upper-right corner of my website using fixed positioning. It will be an icon on top of a background color with a hover effect. I'm curious if it's possible to achieve this with an angled div or ...

javascripthtmlcss

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

htmlcss

Scala Play templating with vararg HtmlContent allows for dynamic generation of

I have a standard template in play 2.6, where I need to pass in a variable number of HtmlContents. The template is defined like this (including the implicit parameter): @(foo: String)(content: Html*)(implicit bar: Bar) When working with the template, I c ...

htmlscalaplayframeworkvariadic-functionstwirl

Using JQuery Mobile to Incorporate Links into List Elements

Creating a mobile webpage tailored for college students involves assigning each student a unique id and an additional field. Both fields can be treated as strings, with the unique id being guaranteed to be unique, while the second field may or may not be u ...

jqueryhtmljquery-mobile

Equal dimensions for multiple div elements in both height and width

Looking to create responsive blocks using jQuery. I have two cube blocks with different widths. After writing a few lines of code to make them responsive, the second block now takes the height of the first div and changes on resize. Check out this example ...

jqueryhtmlcss

Issue with IE8 displaying responsive content incorrectly

The inspection tool in IE8 Developer shows that the @media queries are functioning properly, with respond.min.js and html5shiv working as expected. The background images and div heights specified in the CSS files corresponding to the @media queries are bei ...

javascriptjquerycssinternet-explorer-8

How to Customize Auto Complete Background Color of Selected Items in Bootstrap 4 Input Controls?

I'm currently struggling to figure out how to override the default white background color of a form control's autocomplete in Bootstrap. The white background doesn't align well with my dark theme. Whenever I enter something into an input fi ...

cssbootstrap-4

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

javascriptjquerycsssortingwebkit

Updating the border color of a floating form using React Bootstrap

Is there a way to customize the color of the border to something other than blue in React Bootstrap? https://i.sstatic.net/ScIw1.jpg ...

cssreactjsbootstrap-4react-bootstrap

Responsive Bootstrap cards that maintain uniform height

I created a grid system with three columns: two equal and one smaller. However, I am facing an issue where I cannot set a height on the cards without using fixed pixel values. Ideally, I would like the three columns to have the same responsive height (100% ...

htmlcsstwitter-bootstrapbootstrap-4

Trying to wrap my head around CSS and PHP is proving to be quite

I am struggling to find a cohesive theme for a new script that I recently purchased. My website is azngirls.com (no, it's not adult content haha) and if you visit the homepage, you'll notice a navigation or header bar with options like Login - R ...

phpcss

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

javascripthtmlmp3html5-audio

Hovering over the Second NavBar will display a block instead of just a line

Hey there, I'm facing an issue on my website with the second navbar where I display categories. Out of the 9 categories listed, 2 only have one line of text each. This causes the hover effect to only highlight the text line itself and not the entire b ...

htmlcssnavbarnav

Utilizing MaterialUI and CSS to craft this stunning box

Looking to create a new MaterialUI component similar to this one: original box Struggling with implementing it using the card component, but so far it looks like: poorly designed box Here's my custom styling using makeStyles: const useStyles = ma ...

cssreactjsmaterial-ui

Prevent unexpected page breaks in <tr> elements on Firefox (Could JavaScript be the solution?)

Wondering if there are any ways, possibly through JavaScript or CSS, to avoid having page breaks within <tr> elements specifically in Firefox. Given that FF does not yet fully support page-break-inside, I assume this might need to be addressed using ...

javascriptcssfirefoxprintingpage-break

Issue with Bootstrap container's max-width not functioning

After implementing the code in the following manner: <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> <style type="text/css"> .con ...

htmlcsstwitter-bootstrap