5 Replies Latest reply on Mar 11, 2010 8:04 AM by Mike_Watt

    Best way to approach (DIVS/Tables)

    Mike_Watt Level 2

      Hello community.

       

      I am trying to create a layout that will be broken up like this:

      tables_visual.jpg

      You see the even row across the top, then the left column has to boxes of roughly equal size, while the middle column has two boxes, the bottom taller than the top, and the third column has one cell the height of the other two combined.

      I've tried this in tables to no avail - I use rowspans to join rows, but because of the layout, there is always one row that doesn't have a height defined (due to being spanned from both ends in different <TD> tags.

      I thought about <DIV>/<SPAN>, but I have to admit, I wouldn't know how to achieve this layout using <DIV>/<SPAN>.

      Does anyone have any thoughts, tips, or suggestions?

        • 1. Re: Best way to approach (DIVS/Tables)
          brightbelt Level 1

          Maybe you've already tried this, and it's a Tables method. But I think it'd give you the control you want:

           

          I'd make a Main table with 3 columns and 2 rows. Set the height for the top row and the longer bottom row. Then do 2 nested tables - one in the first column/bottom row cell and another nested table in the second column on the bottom row cell.

           

          Your first nested table has 1 column with 2 rows and the second nested table has 1 column and 1 row. Being nested gives you flexible height control without them "pulling" on the cell within which they are contained.

           

          I hope this helps.

           

          Frank B.

          1 person found this helpful
          • 2. Re: Best way to approach (DIVS/Tables)
            Mike_Watt Level 2

            I managed a "hybrid" solution that used a table with three columns (one row), and then <DIV> tags within each column to specify the height for that area/div.  It worked well for the primary purpose, but now I can't get it to center properly.

             

            The top of the page (the visible header/lead/navigation) and the footer are all centered and working properly, but the elements in the middle are not.  I've tried all kinds of things and nothing does what I need.  When I change the table width to "100%" (from the pixel count it has now) it centers, but it spaces everything out horizontally (despite the fact that the <TD> tags have widths specified in them.

             

            If anyone knows how I can get this working please share the knowledge!

             

            http://www.melsbgc.com

            • 3. Re: Best way to approach (DIVS/Tables)
              osgood_ Level 8

              You're instructing your table to float: left; in your css and that's what it is doing.

               

              table {
                float: left;
              }

               

              Re-instate the px width of the table and change the above to:

               

              table {

              margin: 0 auto;

              }

              • 4. Re: Best way to approach (DIVS/Tables)
                Jeremy bowmangraphics Level 2

                You might try this sort of approach, which avoids tables altogether:

                 

                 

                 

                 

                 

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

                .pseudo-table {

                margin: 60px auto;

                width: 606px;

                height:386px;

                border:#333 solid 1px;

                }

                .pseudo-table .col {

                float: left;

                width: 200px;

                border-left:solid;

                border-left-color:#333;

                border-left-width:1px;

                border-right:solid;

                border-right-color:#333;

                border-right-width:1px;

                }

                .pseudo-table .col .header {

                height: 50px;

                }

                .pseudo-table .col .half {

                height: 150px;

                }

                .pseudo-table .col .one-third {

                height: 100px;

                }

                .pseudo-table .col .two-thirds {

                height: 200px;

                }

                .pseudo-table .col .full {

                height: 312px;

                }

                 

                .pseudo-table .col .header, .pseudo-table .col .half,

                .pseudo-table .col .one-third, .pseudo-table .col .two-thirds, .pseudo-table .col .full {

                padding: 5px;

                border-top:solid;

                border-top-color:#333;

                border-top-width:1px;

                border-bottom:solid;

                border-bottom-color:#333;

                border-bottom-width:1px;

                }

                </style>

                </head>

                 

                <body>

                <div class="pseudo-table">

                  <div class="col">

                    <div class="header">Content for  class "header" Goes Here</div>

                    <div class="half">Content for  class "half" Goes Here</div>

                    <div class="half">Content for  class "half" Goes Here</div>

                  </div>

                  <div class="col">

                    <div class="header">Content for  class "header" Goes Here</div>

                    <div class="one-third">Content for  class "one-third" Goes Here</div>

                    <div class="two-thirds">Content for  class "two-thirds" Goes Here</div>

                  </div>

                  <div class="col">

                    <div class="header">Content for  class "header" Goes Here</div>

                    <div class="full">Content for  class "full" Goes Here</div>

                  </div>

                </div>

                </body>

                </html>

                1 person found this helpful
                • 5. Re: Best way to approach (DIVS/Tables)
                  Mike_Watt Level 2

                  Osgood -

                  Thanks... i'm slowly getting used to using more and more CSS in pages.  I really appreciate your help on that.

                   

                  Jeremy -

                  Thanks... I'm going to read thru that code when I get home and see what I can learn from it... I would like to get away from tables, but I am not quite there on the learning curve yet.  I appreciate the feedback VERY much.