Placing elemenents with css? - css

Question

I want to place image floated left, next to image, floated left one under another would be Authro, Date and Category, than, after this other elements will be floated on right side...
Like this...
https://i.imgur.com/tcKwalP.png
This is what I have so far...
https://jsfiddle.net/fbn9r3y4/
This is html...
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<span class="entry-author">
Ester
</span>
<span class="entry-date">September 3, 2019</span>
<span class="entry-category-single">
Music
</span>
<span class="meta-right">
<span class="entry-views"><span class="view-count">998</span> Views</span>
<span class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em>Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</span>
</span>
</div>
This is css...
.entry-meta {
font-family: Arial, sans-serif;
display: block;
align-items: center;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image {
display: block;
float: left;
}
.entry-author {
display: block;
float: left;
width: 200px;
}
.entry-date {
display: block;
float: left;
width: 200px;
clear: left;
}
.entry-category-single {
display: block;
float: left;
width: 200px;
clear: left;
}
.meta-right {
margin: 0 10px 0 0;
margin-left: auto;
order: 2;
float: right;
}
.entry-like {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}
.entry-views {
min-width: 32px;
line-height: 1;
float: right;
clear: right;
}

Answer 1

I changed up your markup a little bit and added a wrapping meta-left around the content of the left side. I also simplified your CSS. There were several CSS properties that were invalid or not necessary.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-meta::after {
content: '';
clear: both;
display: block;
}
.meta-left {
float: left;
}
.meta-right {
float: right;
margin: 0 10px 0 0;
}
.entry-image {
float: left;
}
.meta-info {
float: left;
margin-left: 10px;
}
.entry-like {
min-width: 32px;
line-height: 1;
}
.entry-views {
min-width: 32px;
line-height: 1;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>
Here's a version using display: flex that's even simpler. Same markup.
.entry-meta {
font-family: Arial, sans-serif;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.meta-left {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.meta-info {
margin-left: 10px;
}
<div class="entry-meta">
<div class="meta-left">
<div class="entry-image">
<a class="entry-image-a" href="">
<img src="https://via.placeholder.com/48" height="48" width="48">
</a>
</div>
<div class="meta-info">
<div class="entry-author">
Ester
</div>
<div class="entry-date">September 3, 2019</div>
<div class="entry-category-single">
Music
</div>
</div>
</div>
<div class="meta-right">
<div class="entry-views"><span class="view-count">998</span> Views</div>
<div class="entry-like">
<span class="sl-wrapper">
<a href="" class="sl-button">
<span class="sl-count">500<em> Likes</em></span>
</a>
<span class="sl-loader"></span>
</span>
</div>
</div>
</div>

Answer 2

Esteros. Please check this link
https://codepen.io/juricon/pen/QWLOZea
HTML:
<div class="entry-meta">
<span class="entry-image">
<a class="entry-image-a" href="">
<img src="image.jpg" height="48" width="48">
</a>
</span>
<ul class="left-float-list">
<ol>
<a href="" title="" rel="author">
Ester
</a>
</ol>
<ol>
September 3, 2019
</ol>
<ol>
<a href="">
Music
</a>
</ol>
</ul>
<ul class="right-float-list">
<li class="items-reverse">
<span class="entry-views">
<!--do not miss nesting rules <tag><tag1></tag1</tag> -->
998
</span>
<span class="view-count">
Views
</span>
</li>
<li>
<span class="entry-like">
<span class="sl-wrapper"> <!--do not miss nesting rules <tag><tag1></tag1</tag> Also, you don't have in CSS classes like .sl-wrapper .sl-button, .sl-count, sl-loader -->
<a href="" class="sl-button">
<span class="sl-count">
500<em>Likes</em>
</span>
<!-- it is a bad idea to use <em> with not cursive text in one <span>. Use CSS to style your text -->
</a>
<span class="sl-loader">
</span>
</span>
</span>
</li>
<li>
Whatever
</li>
</ul>
CSS:
*{ /*clear styles*/
margin:0;
padding:0;
/*clear styles*/
}
.entry-meta {
font-family: Arial, sans-serif;
display: block;
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 10px 2px;
}
.entry-image{
float: left;
}
.left-float-list{
float: left;
width: 200px;
list-style:none;
background: green;
margin-left:.4em;
}
.right-float-list{
float: right;
list-style:none;
background: red;
margin-right:1em;
}
.entry-views, .entry-like {
min-width: 32px;
line-height: 1;
}
Esteros, here you will find a great web development free course https://www.freecodecamp.org/ and
https://www.w3schools.com/html/default.asp.
It will help you a lot. Good luck!
P.S.: Use Flexbox instead of "float" and you won't regret.