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=>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=>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=>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=>Links
</div>
</div>
<div class="clear"></div>
</div>
</div>
2
Answers
I moved the footer block after the clear div and removed the
bottom
property. It looks good now.