ansaurus

Question

How can I layout some divs in the following arrangment?

Answer 1

+4 A:

I'd say 2 wrappers div "left" and "right" floating left with correct sizes.

Put div 1 in left

Put div 2, 3 and 4 in right.

This should work, if not let me know

marcgg 2009-06-16 15:50:46

Just to give that as code:<div id="left"><div id="1"></div></div><div id="right"><div id="2"></div><div id="3"></div><div id="4"></div></div>

Lazarus 2009-06-16 15:54:36

Gah! Don't use "left" and "right" as ID or class values! Otherwise a sound idea.

roryf 2009-06-16 16:07:38

I'm interested in that, why not use something like left, right? Not meaningful enough?

merkuro 2009-06-16 16:12:21

I said left and right but you can use whatever depending on your business logic

marcgg 2009-06-16 18:03:53

@merkuro it's like using a class name of "red", what happens when you decide that actually that needs to be blue? "content" and "sidebar" would have been better, but as you say it depends on your logic.

roryf 2009-06-17 10:24:17

Answer 2

+3 A:

Here is a working example, that might help you:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Floating</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0; 
      }
      .content{
        padding:10px;
        margin-top:50px;
        width:770px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
      }
      .content h1{
        text-align:center; 
      }

      .content h2{
        text-align:center; 
      }

      .content .left{
        width:600px;
        float:left; 
        border:1px solid black;      
      }

      .content .right{
        width:150px;
        float:right;
      }

      .content .right div{        
        margin-bottom:10px; 

        border:1px solid black;
      }
      .content .clear{
        clear:both; 
      }
    </style>
  <body>
    <div class="content">
      <h1>Main Container Div</h1>
      <div class="left">
        <h2>Div #1</h2>
      </div>
      <div class="right"> 
        <div><p>Div #2</p></div>
        <div><p>Div #3</p></div>
        <div><p>Div #4</p></div>
        <div><p>Div #5</p></div>
      </div>
      <div class="clear">&nbsp;</div>
    </div>
    </body>
</html>

merkuro 2009-06-16 16:00:54

Btw. marcgg was way faster and this is basically his idea!

merkuro 2009-06-16 16:02:06

ansaurus

tags:

views:

answers:

How can I layout some divs in the following arrangment?

related questions