SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    putting a table in 3 column layout

    I currently have a 3 column page layout similar to the one found at http://glish.com/CSS/7.asp. Here is the relevant portion of the CSS that I'm using:
    Code:
    /* center column */
    #Content { color: #000000;
               background-color: #FFFFB2;
               border-width: 3px;
               border-color: #203FD8;
               border-style: ridge; 
               /* IE 5 box model hack */
               margin-left: 196px;
               margin-right: 198px;
               margin-top: 120px;
               voice-family: "\"}\"";
               voice-family:inherit;
               /* end hack section */
               margin-left: 198px;
               margin-right: 200px;
             }
    
    /* left hand side menu */                   
    #Menu { color: #FFFFFF;
            background-color: #4BAF2A;
            line-height: 1.1em;
            padding: 8px;
            border-width: 3px;
            border-color: #1FD4DD;
            border-style: groove; 
            position: absolute;
            top: 120px;
            left: 100px;
            width: 100px;
            /* IE 5 hack to adjust position for displaying logo */
            voice-family: "\"}\"";
            voice-family:inherit;
            /* end hack */
            left: 80px
          }
    
    /* right hand side menu */               
    #Submenu { color: #E8E1F2;
               background-color: #800000;
               line-height: 1.1em;
               padding: 8px;
               border-width: 3px;           
               border-color: #3AAAAA;
               border-style: groove;
               position: absolute;
               top: 120px;
               right: 100px;
               width: 100px;
               /* IE5 hack to prevent submenu from displaying incorrectly */
               voice-family: "\"}\"";
               voice-family:inherit;
               /* end IE 5 hack */
               right: 80px;
               position: fixed
             }
    I tested the above CSS and it works well. The center column resizes properly when the browser is resized. The 2 side columns maintain their size.

    I am having some problems when it comes to placing an HTML table inside the center column. When the browser is resized, or if the screen is viewed at 640x480, the table spills out of the center column. The table has 5 columns. Here is the HTML for the table:
    Code:
      <div id="Content">   
       <table summary="Current Shopping Cart">
        <caption>Items in your cart</caption>
        <colgroup span="5" width="10%">
        </colgroup>
        <tr>
         <td>Product</td>
         <td>Description</td>
         <td>Quantity</td>
         <td>Price</td>
         <td>Remove</td>
        </tr>  
       </table>
      </div>   
    
      <div id="Menu">
         <a href="#">Link 1</a> <br />
         <a href="#">Link 2</a> <br />
         <a href="#">Link 3</a> <br />   
         <a href="#">Link 4</a> <br />  
      </div>
      
      <div id="Submenu">   
         <a href="#">Sublink 1</a> <br />
         <a href="#">Sublink 2</a> <br />
         <a href="#">Sublink 3</a> <br />
         <a href="#">Sublink 4</a> <br />
      </div>
    As I had mentioned above, when the browser is resized or a smaller resolution than 800x600 is selected, the table spills out of the center column.

    Is this bad design on my part, or is it because there is just no room for the table to fit in the center column? What changes can I make?

    TIA

  2. #2
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I see it, the problem may be that the table cannot actually resize below the allotted number of pixels because the text may be dictating the width of the table. If this is not the case, maybe you could try specifying the table width as 10% and not just the colgroup width.

    -KEith
    Keith Rousseau

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I put table width as 10%, it just takes up 10% of the container. It does not fill up the whole box.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as someone mentioned above, you have set the minimum width of the table by putting the text in all those TDs...
    try an experiment, resize your browser to a size where the table overlaps... then resize your text to smaller... see what happens...

    a solution...
    redesign the way you show the information such that it doesn't need to be in a wide table


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
  •