samsos samsos - 1 year ago 95
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.


<div class="posts__post">
<a class="posts__post--preview" href=""><img src="" /></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 --->


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;

font-size: em(15);
font-weight: bold;
color: $light-grey;

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;



Answer Source

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

    padding: 0 25px;
    display: inline-block;
    text-docoration: none;
    width: 100%;
    box-sizing: border-box;

For more info about box-sizing

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download