SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Something like this, maybe?

    HTML Code:
    <!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>

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    No problem
    Happy to help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •