SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    France
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mimic a 100%-wide table with CSS divs and spans

    Hello ! I hope someone can help me here. I try to do this with divs and spans :

    <table width="100%">
    <tr width="100%">
    <td><a href="#" style="display:block">Item1</a></td>
    <td>Item2</td>
    <td>Item3</td>
    </table>

    Every cell is a <a> block and the row stretches at 100% of the container.

    Is there a way to do this in CSS without any table ?

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

    Well css isn't that clever at reproducing this specific table behaviour but here are a couple of exmples that come close.

    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    div {background:#ccc;clear:both;height:1.5em}
    div.odd {background:blue}
    a {
     width:33.2%;
     float:left;
     color:#000;
     height:100%;
    }
    a:hover{background:#ffffcc}
    </style>
    </head>
    <body>
    <div><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div>
    <div class="odd"><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div>
    <div><a href="#">Item1</a><a href="#">Item2</a><a href="#">Item3</a></div>
    </body>
    </html>
    Or more seomatically using lists but it gets a lilte more complicated.
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    div {background:#ccc;clear:both;height:1.5em}
    div.odd {background:blue}
    ul, li {
     margin:0;
     padding:0;
     list-style:none;
    }
    li {display:inline}
    li a {
     width:33%;
     float:left;
     color:#000;
     height:100%;
    }
    li a:hover{background:#ffffcc}
    </style>
    </head>
    <body>
    <div> 
      <ul>
    	<li><a href="#">Item1</a></li>
    	<li><a href="#">Item2</a></li>
    	<li><a href="#">Item3</a></li>
      </ul>
    </div>
    <div class="odd"> 
      <ul>
    	<li><a href="#">Item1</a></li>
    	<li><a href="#">Item2</a></li>
    	<li><a href="#">Item3</a></li>
      </ul>
    </div>
    <div> 
      <ul>
    	<li><a href="#">Item1</a></li>
    	<li><a href="#">Item2</a></li>
    	<li><a href="#">Item3</a></li>
      </ul>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul


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
  •