CSS help me placing these divs please

Question

I have been having fun with CSS lately. Learning different things.

I'm trying to place three divs like this: https://i.stack.imgur.com/miN9G.png

What I get: https://i.stack.imgur.com/eST25.png

(Need to post images as link. need more rep. I'll fix it when I get enough)

Should I add another div, set the class to example 'placeholder' make the width to the same size as 'info'?

If you could make a small example I'll put that code into my code.

Answer 1

Hope this is what you want?

.left {
 float: left;
 width: 300px;
 height: 300px;
 background-color: #111;
 margin: 2px;
}
.right {
 float: left;
 width: 200px;
 margin: 2px;
}
.right-1 {
 float: left;
 width: 250px;
 height: 100px;
 background-color: #111;
 margin-bottom: 4px;
}
.right-2 {
 float: left;
 width: 250px;
 height: 100px;
 background-color: #333;
}

  

<div class="left"> </div>
<div class="right">
  <div class="right-1"> </div>
  <div class="right-2"> </div>
</div>


    

Answer 2

Let's say you have box 1,2 and 3. First you need to split box 1 from 2 and 3. Create two float divs, the problem you are having is probably because you are having it al on the same level. An example code as below

<div id="box1" style="float:left; width: 200px"></div>
<div style="float:left; width: 200px">
  <div id="box2"></div>
  <div id="box3"></div>
</div>