Question

I can’t see where’s my problem. I’ve tried multipule ways but I still have the same problem. As the title says, I’ve got a div into a div. When using float on the child, he leaves the parents div. Even though it’s not really the case, when setting borders to check it, that’s what I see.

#feed{
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
width: 70%;
float: center;  
}

.news{
margin:auto;
margin-top: 10px;
padding-bottom: 5px;
border: 1px solid;
}

.newsContent{
margin-top: 5px;
margin-left:5px;
margin-right:5px;
background-color:red;
}

.newsContent p{
margin-left: 5px;
margin-right: 5px;
}

.newsDate{
width: 20%;
margin-top: 5px;
margin-left:5px;
margin-right:5px;
float: right;
background-color:red;
}

.newsDate p{
text-align: center; 
}

and my html code :

<div id="feed">
    <div class="news">
        <div class="newsContent">
            <p> ici nouveauté </p>
        </div>

        <div class="newsDate">
            <p> ici date </p>
        </div>
    </div>
</div>

Thank you.

Answer 1

Add

<div style="clear: both;"></div>

After the child div, inside the parent div. This clears the float you applied to the child div and should give you the effect you want.