3 box left, 1 box right CSS

I’m trying to build a container. I want to stack three boxes on the left, and one large box on the right.

I’ve played around with the css (especially the floats), and have tried several times, but can’t get it to display properly.

I’ve searched dozens of web template examples, but can’t find the layout I’m looking for.

Can someone please help an old guy who used to work with tables? As always, thanks in advance.

Hi there,

Something like this, maybe?

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Four box layout</title>
    <style>
      .wrapper{ width:1000px; margin:0 auto; }
      .boxRight{ width:750px; float:right; height:750px;background:yellow; }
      .boxLeft{ width:250px; float:left; height:250px; }
      .first{ background:red; }
      .second{ background:blue; }
      .third{ background:orange; }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="boxRight">&nbsp;</div>
      <div class="boxLeft first">&nbsp;</div>
      <div class="boxLeft second">&nbsp;</div>
      <div class="boxLeft third">&nbsp;</div>
    </div>
  </body>
</html>

That’s EXACTLY what I needed! Thanks for the quick response…no wonder you were Member of the Year last year! I failed to float: right for the large box!

No problem :slight_smile:
Happy to help.