SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    three divs: div 1&2, stacked next to div 3

    Hi, I'm wondering if it is possible, using the following markup, to create the layout below? Thank you.

    <div class="container" >
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
    <div class="container" />
    <div class="container" >
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
    <div class="container" />

    ------------------------------------------
    div 1 | |
    | |
    ---------------- | div 3 |
    div 2 | |
    | |
    ------------------------------------------
    div 1 | |
    | |
    ---------------- | div 3 |
    div 2 | |
    | |
    ------------------------------------------
    Last edited by eft; May 3, 2010 at 00:27. Reason: layout

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,797
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try wrapping your script in HTML tags:
    HTML Code:
      <div class="container" >
    
         <div class="div-1">
         </div>
    
         <div class="div-2">
         </div>
    
         <div class="div-3">
         </div>
    
      </div><!--  class="container" -->
    
      <div class="container" >
    
             <div class="div-1">
             </div>
    
             <div class="div-2">
             </div>
    
            <div class="div-3">
            </div>
    
      </div><!--  class="container" -->

    .
    Last edited by John_Betong; May 3, 2010 at 03:28. Reason: spelling

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about my OP - I am trying to use css to create the same layout as this <table> produces.

    HTML Code:
    <table>
    <tr>
      <td>div1</td>
      <td rowspan="2">div3</td>
    </tr>
    <tr>
      <td>div2</td>
    </tr>
    </table>
    HTML Code:
      <div class="container" >
    
         <div class="div-1">
         </div>
    
         <div class="div-2">
         </div>
    
         <div class="div-3">
         </div>
    
      </div><!--  class="container" -->
    
      <div class="container" >
    
             <div class="div-1">
             </div>
    
             <div class="div-2">
             </div>
    
            <div class="div-3">
            </div>
    
      </div><!--  class="container" -->

  4. #4
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,797
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try this:
    HTML Code:
    <table style='width:420px; margin:2em auto; border:solid 1px'>
    <tr style='border:solid 1px #000'>
      <td style='border:dotted 2px #000'>
      	div1
      </td>
      <td rowspan="2" style='border:solid 1px #000'>
      	div3
      </td>
    </tr>
    
    <tr style='border:solid 1px #000'>
      <td style='border:dotted 2px #000'>
      	div2
      </td>
    </tr>
    </table>
    
    <div style='width:42&#37;; margin:2em auto; border:solid 1px'>
    	
    	<div style='float:right; width:48%; height:240px; border:dotted'>
    		div 3
    	</div>	
    	
    	<div style='float:left; width:48%; height:120px; border:solid 1px'>
    		div 1
    	</div>	
    	
    	<div style='clear:left;float:left; width:48%; height:120px; border:solid 1px'>
    		div 2
    	</div>	
    
    </div>	



    .

  5. #5
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John - Thanks, that is very helpful.

    However, the way the container (outside div) border is rendered varies between browsers: In IE7 and Op10 the borders go all around the three inner divs as expected but for Chrome/FF the inner divs seem to float below the container somehow.

    Also, is it essential to use a div height because I'm not sure how much content will be inside each div?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .container {
        float:left;
        border:1px solid #000;
        border-top:none;
        margin:20px;
        clear:both;
    }
    .inner {
        float:left;
    }
    .box {
        float:left;
        width:200px;
        clear:left;
        border-right:1px solid #000;
        border-top:1px solid #000;
        margin:0 -1px 0 0;
        position:relative;
    }
    .box2 {
        width:200px;
        clear:none;
        border-left:1px solid #000;
        margin:0 -1px 0 0;
    }
    </style>
    </head>
    <body>
    <div class="container" >
        <div class="inner">
            <div class="div1 box">
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            </div>
            <div class="div2 box">
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            </div>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    <div class="container" >
        <div class="inner">
            <div class="div1 box">
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            </div>
            <div class="div2 box">
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            </div>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    <div class="container" >
        <div class="inner">
            <div class="div1 box">
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
                <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            </div>
            <div class="div2 box">
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
                <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            </div>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    </body>
    </html>
    However it would be much easier using a table and if you want to copy exact table behaviour then I would say use a table until IE7 is dead and you can use display:table instead.

    The issue is probably why you need something like and perhaps a design change would simplify things so that you don't need tricks like this

  7. #7
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I am constrained by the CMS such that I cannot wrap my div1 & div2 within an inner div. I appreciate that table perhaps makes more sense.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well it can be done without the inner but needs hacks for iE6.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .container {
        float:left;
        border:1px solid #000;
        border-top:none;
        margin:20px;
        clear:both;
    }
    .inner {
        float:left;
    }
    .box {
        float:left;
        width:198px;
        clear:left;
        border-top:1px solid #000;
        border-right:1px solid #000;
        margin:0 -1px 0 0;
        position:relative;
        padding:1px;
    }
    * html .box{margin-right:-4px;}
    .box2 {
        width:198px;
        float:none;
        clear:none;
        border-left:1px solid #000;
        border-right:none;
        margin:0 0 0 200px;
    }
    * html .box2{margin-left:197px}
    </style>
    </head>
    <body>
    <div class="container" >
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    <div class="container" >
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    <div class="container" >
        <div class="div1 box">
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
            <p>Some text in div1 : Some text in div1 : Some text in div1 : Some text in div1 : </p>
        </div>
        <div class="div2 box">
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
            <p>Some text in div2 : Some text in div2 : Some text in div2 : Some text in div2 : </p>
        </div>
        <div class="div3 box box2">
            <p>Some text in div3 : Some text in div3 : Some text in div3 : Some text in div3 : </p>
        </div>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks again - very helpful!


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
  •