SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cell widths aren't static!

    I am fairly new to CSS, so please bare with me. I am struggling with a page that has a three column setup:

    Code:
    <tr id="content"> 
        <td id="menu"> 
          <? $menu->build_menu(); ?>
        </td>
        <td id="bar"> 
          <div align="center"><img src="images/bar.gif" width="8" height="500"></div>
        </td>
        <td id="page"> 
    	<? include("pages/".$page_info['page_url']); ?>
        </td>
    </tr>
    Ovbiously, the first is for a menu, the second is a graphic break that I couldn't replicate very well in CSS, and the third is the page content. PHP is used to generate the menu and to include the appropriate content file.

    The CSS for these items is:
    Code:
    tr#content {
    	background: white;
    	vertical-align: top;
    	border-width: 0;
    }
    tr#content td {
    	padding-bottom: 20px;
    }
    td#menu {
    	margin-left: 20px;
    	width: 250px;
    	padding-right: 20px;
    }
    td#bar {
    	width: 30px;
    }
    td#page
    {
    	padding-top: 20px;	
    }
    The menu is supposed to take up 250px, no more and no less. Same with bar, but only 30px. The issue is that on pages where "page" doesn't have a lot of content, or where the content isn't very wide, the menu and bar get aggressive and take up the rest of the space. This doesn't help to create a very consistant look across pages.

    I have tried max-width, but not only did it not work, it only has meager cross-browser support. I want the "page" to take up the remainder of the space, not the other two.

    Any help would be greatly appriciated! Thanks!
    Last edited by Whatknows; Sep 23, 2003 at 15:10.

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem you are having is that you are using tables If you are using CSS then tables should not be required.

    If you HAVE to use tables then set the column widths either directly in the td tag or in a col tag. It'll work better in the browsers that are less CSS complient.

    However why not try a totally CSS layout ?

    I'd use

    HTML Code:
    <style>
    body, html {
      padding: 0px;
      margin: 0px;
    }
    
    body {
      background-color: white;
    }
    
    #menu {
      width: 250px;
      float: left;
    }
    
    #bar {
      width: 30px;
      float: left;
      margin-left: 11px;
    }
    
    #page {
      margin-left: 280px;  
    }
    </style>
    HTML Code:
    <div id="menu"> 
        <? $menu->build_menu(); ?>
    </div>
    <div id="bar"> 
        <img src="images/bar.gif" width="8" height="500">
    </div>
    <div id="page"> 
        <? include("pages/".$page_info['page_url']); ?>
    </div>
    That's one way, other people might choose to use absolute positioning for the menu and separator bar.

  3. #3
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suppose I should take the plunge. Any recommendation on a table replacement tutorial?

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SP has a nice series of articles and a book, Designing Without Tables that're probably up your ally. Also, take a gander over at some of the earlier CSS articles the ALA archives. :-)

    ~~Ian

  5. #5
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


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
  •