www.webdeveloper.com
Results 1 to 9 of 9

Thread: CSS layout instead of tables: vertical column length and background images???

Threaded View

  1. #1
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62

    Angry CSS layout instead of tables: vertical column length and background images???

    Hi, everyone,

    In the good old days life was simple: you'd make a layout table like so:
    HTML Code:
    <center><table width="984">
    <tr><td colspan="2"><img="topbar.jpg"></td></tr>
    <tr><td background="menuBackground.jpg" align="left">
      <a href="1.html">Page 1</a><br />
      <a href="2.html">Page 2</a><br />
      <a href="3.html">Page 3</a><br />
    </td>
    <td background="contentBackground.jpg" align="left">
      <h1>Hello world</h1>
      <p>Content paragraph 1</p>
      <p>Content paragraph 2</p>
      <p>Content paragraph 3/p>
    </td></tr>
    </table></center>
    Yes, I know that this is rather horrid code, but you get the idea. A table cell for the header, below which you find a left hand side column for the menu and a right hand side column for the content, both of which have background images (typically defined in CSS) which tile nicely, and the bottoms of both columns line up fine:

    Code:
    +---------------+
    |                     |
    +---+-----------+
    |     |               |
    |     |               |
    |     |               |
    +---+-----------+
    So that was how it used to be, and life was good. Mostly, at least. But using tables for layout is a bit last century and does not work well in some cases anymore (e.g. on mobile devices) so this time I decided to do it properly and use CSS. Which proved a headache.

    My main problem is that when I try to do the above in CSS rather than with tables, using <div> containers rather than table cells, the bottom alignment of the columns goes haywire. The background images do not fill the column all the way down.

    E.g.:

    Code:
    <div class="layout"
    <div class="topbar"><img="topbar.jpg"></div>
    <div class="menu">
      <a href="1.html">Page 1</a><br />
      <a href="2.html">Page 2</a><br />
      <a href="3.html">Page 3</a><br />
    </div>
    <div class="content">
      <h1>Hello world</h1>
      <p>Content paragraph 1</p>
      <p>Content paragraph 2</p>
      <p>Content paragraph 3/p>
    </div>
    </div>
    
    CSS:
    
    .layout {
      width: 984px;
    }
    .topbar {
      width: 984px;
      margin: auto;
      text-align: center;
    }
    .menu {
      width: 170px;
      float: left;
      background-image: url(menuBGpattern.jpg);
      background-position: top left;
      background-repeat: repeat-y;
    }
    .content {
      vertical-align: top;
      margin-top: 5px;
      margin-left: 185px;
      text-align: justify;
    }
    The menu background image only covers the part of the page that has content in it (in this case the menu links) but then it stops. There is no way to make the bottom edges of both columns line up. I have tried adding a 'position: absolute; height: 100&#37;' to the menu CSS code, but this extends the menu background to more than 100% of my screen in Firefox, and in IE it moves horizontally to the center of the screen.

    What is the proper way to do this? I've been banging my head against the wall all afternoon, and I just don't see it... Can anyone point me in the right direction? Thanks!!

    // Frank
    Last edited by frankvw; 07-27-2010 at 10:57 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles