Positioning of the third div

Question

I have 3 Ivs and the idea is that the first two next to each other, so I used the float: left:

<div class="div1" id="employee_table" style="float: left;">

</div>  

<div class="div2" id="employee_table" style="float: left;">

</div>  

But now I have a third div and I intend to keep it below the second div, how can I do?

I show in the picture:

Answer 1

Follows a model with float as you wanted, the problem is that with float the height of the box on the left is not equal to the height of the boxes on the right, if you want to adjust this you have to for a hand value. Besides, you need to make one clearfix, for the text that comes after the container don’t fit with the top boxes...

Follow a basic example.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container::after {
    content: "";
    clear: both;
    display: table;
}

.box {
    border: 1px solid #000;
    box-sizing: border-box;
    width: calc(50% - 20px);
    margin: 10px;
    float: left;
}
.box.n2,
.box.n3 {
    float: right;
}

<div class="container">
    <div class="box n1">n1</div>
    <div class="box n2">n2</div>
    <div class="box n3">n3</div>
</div>
    
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, quam soluta necessitatibus sapiente error laudantium illum, fuga veritatis veniam quibusdam obcaecati voluptatem in aspernatur eum sequi! Ducimus mollitia eos excepturi.
    </p>
<div class="container">
    <div class="box n1" style="height: 60px;">n1</div>
    <div class="box n2">n2</div>
    <div class="box n3">n3</div>
</div>

---

Now an option with Flex if you care. Here the children will follow the height of the brother next to.

Follow the image code above

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
}
article {
    border: 1px solid #000;
    box-sizing: border-box;
    width: 50%;
}
article.coluna {
    display: flex;
    flex-direction: column;
}

.box {
    border: 1px solid #000;
    box-sizing: border-box;
}
.box.n2,
.box.n3 {
    flex: 1;
}

<div class="container">
    <article>
        <div class="box n1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores ea debitis cum illum perferendis labore voluptates at magni omnis unde?Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, nesciunt. Recusandae rerum tempora reprehenderit officia odit! Alias ipsam voluptates veniam officiis laboriosam et odit, ullam molestiae nihil, officia consequatur. </div>
    </article>
    <article class="coluna">
        <div class="box n2">n2</div>
        <div class="box n3">n3</div>
    </article>
</div>
    
<p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, quam soluta necessitatibus sapiente error laudantium illum, fuga veritatis veniam quibusdam obcaecati voluptatem in aspernatur eum sequi! Ducimus mollitia eos excepturi.
</p>

Answer 2

When using float: left all will be grouped to the right of the widgets. One way is to insert a div with clear: both; after the third div, avoiding that later elements are grouped to the right of the Divs:

Note: Do not repeat id’s. An id must be unique. In the example below convert the repeated id employee_table in class.

As @Hugocsl put it, use calc to set the width of the Ivs (discounting the margins). However, my suggestion does not require Divs container, how he put.

See how it looks:

.employee_table{
   float: left;
   margin: 5px;
}

.div1{
   width: calc(40% - 10px);
   background: red;
}

.div2, .div3{
   width: calc(60% - 10px);
}

.div2{
   background: blue;
}

.div3{
   background: yellow;
}

.breaker{
   clear: both;
}

<div class="div1 employee_table">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="div2 employee_table">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>

<div class="div3 employee_table">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
<div class="breaker"></div>
<p>
   parágrafo
</p>