samsos samsos - 1 month ago 8
Sass (Sass) Question

How to contain floats inside a DIV

I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.

Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.

HTML

<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>


SCSS

.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);

.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}

.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}

.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}

.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}

.posts__post__timestamp{
float:left;
}

.posts__post__tag{
float:right;
}
}

Answer

This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box

.posts__post--meta{
    padding: 0 25px;
    display: inline-block;
    text-docoration: none;
    width: 100%;
    box-sizing: border-box;
}

For more info about box-sizing