Question

Sometimes even the most simplest of things can seem impossible… have a look at this if maybe you see what I dont.

>> LINK

A div (in green) that is divided using classes into to two sides L and R.

For some reason the classes “left-content, right-content” do not want to stay inside the “examples” div.

#examples 
{
width:100%;
margin-bottom:45%;
padding-top:10%;
height:auto;
border-top: dashed #CCC 1px;
background-color:#0FC
}




.resize 
{
width:100%; 
height:auto; 
border: solid #CCC 1px;
}

.left-content
{
float:left;
width:60%;
}

.right-content
{
float:right;
width:30%;
padding-left:5%;
}

.title
{
margin-top:0px;
font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 1.00em; font-weight:300;     letter-spacing: 0.1em; color:#F63
}   

.content
{
font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.80em; font-weight:300; color:#444; text-justify:newspaper
}

.goto, .goto a, .goto a:hover, .goto a:visited
{
margin-top:-5px; font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.95em; font-weight:300; color:#09F; text-decoration:none; letter-spacing: 0.1em;
}   

Answer 1

If you float elements, the parent element can have a hard time finding out how big they are.

We usually fix this using a so called “clearfix”. It’s an extra element you append to your DOM after your floated elements. These will allow your parent element to find the size of the inner content.

HTML

<div class="left"></div>
<div class="right"></div>

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

CSS

div.clear { clear: both; }

There are other ways to solve this by setting the clear: both property on your parent, or setting a height. But I usually use this and it works very well for me 😉