float:left overlap on other elements - css

Question

I'm struggling to make myself clear, so first, let me show you what I have already done:
Here's an extract of my HTML page :
<div id="random_div">
random text message
</div>
<p>
warning 1
</p>
<p>
warning 2
</p>
and my CSS:
#random_div {
background: #fff;
padding: 20px;
font-size: 25px;
margin: 15px;
width: 150px;
float: left;
}
p{
background-color: orange;
}
which give the output :
And I'd want something like that :
Where there is no overlap between the div and the 2 p.
edit
I'd want to keep the margin of the div, and generally speaking, how the elements are placed, and if it's possible to add margin between the div and the two p, that's even better :)

Answer 1

This is because you are not clearing floats. Wrap the floats with a clearfix class.
#random_div {
background: #fff;
padding: 20px;
font-size: 25px;
margin-right: 15px;
width: 150px;
float: left;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
p{
background-color: orange;
}
<div class="clearfix">
<div id="random_div">
random text message
</div>
<div>
<p>
warning 1
</p>
<p>
warning 2
</p>
</div>
</div>

Answer 2

I made you a simple solution using css grid.
The only change is that instead of using floats, this way you can actually modify the layout much easier. Check the code here: https://codepen.io/lukagurovic/pen/zYYQJNv
<div id="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
#content {
max-width: 960px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(150px, auto));
grid-gap: 10px;
}
.one {
grid-row: 1 / 3;
}
.two {
grid-column: 2 / 5;
}
.three {
grid-column: 2 / 5;
}

Answer 3

Okay, So a friend told me an acceptable solution, I don't really want to take the credit, but well, I have to close this.
The solution is to use flex-box instead of float, which are not really meant for what I wanted to do.
html:
<div class='wrapper'>
<div id="random_div">
random text message
</div>
<div class='message'>
<p>
warning 1
</p>
<p>
warning 2
</p>
</div>
</div>
css:
#random_div {
background: #fff;
padding: 20px;
font-size: 25px;
width: 150px;
margin: 15px;
}
p{
background-color: orange;
margin-right: 5px;
}
.wrapper {
display: flex;
align-items: center;
}
.message {
flex-grow: 1;
}
result:
And now I just need to work a bit with the margin to have the desired output :)