Html - How to put footer block at the same y-line as image?

mstdmstd
June 18, 2023
175 views
0 votes
2 Answers

I make list of news with custom css(I do not use any bootstrap or similar library)
and with image at left side and content at right side. Also I need to put div with footer-block class
below the content at the same y-line as image.
But result is different a bit : https://prnt.sc/KRY1kmwoUNHP

I expected that setting in .footer-block properties

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

will make it, but it does not.

How to fix it with cross platform decision?

.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. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo
        est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. 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 consequuntur commodi quo est delectus sed voluptatem
        qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
        adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
        Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
        eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
        unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
      </p>
      <div class="footer-block">
        2=&gt;Links
      </div>
    </div>

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

Tags: css html

Answers

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

I moved the footer block after the clear div and removed the bottom property. It looks good now.

.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 consequuntur commodi quo
        est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. 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 consequuntur commodi quo est delectus sed voluptatem
        qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium
        adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores.
        Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum
        eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis
        unde asperiores omnis veniam laudantium.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 consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.
      </p>
    </div>

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to put footer block at the same y-line as image?

Answers