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

**frankvw** · 07-27-2010, 09:51 AM

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%' 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

**ryanbutler** · 07-27-2010, 03:47 PM

Make your layout div share the background image from your menu, and from content, and repeat that along the x-axis. That will make both columns look like they are both the same height when they're not. Go ahead and make content class float left as well, with a width and stay away from absolute positioning.

**tirna** · 07-27-2010, 08:49 PM

maybe use this as a guide:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--

.layout {
  overflow: hidden;
  border: 1px solid orange;
  width: 984px;
}

.topbar {
   border: 1px solid black;
  margin: 0px auto 0px auto;
  text-align: center;
}

.menu {
   border: 1px solid red;
   height: 0px;
  width: 170px;
  float: left;
  background-image: url("pic2.jpg");
}

.content {
 border: 1px solid blue;
float: right;
  text-align: justify;
}

-->
</style>

<script  type="text/javascript">
<!--

window.onload=function() {
    document.getElementById("menu").style.height = document.getElementById("content").offsetHeight+"px";
}

//-->
</script>

</head>
<body>
<div class="layout">
<div class="topbar"><img src="pic1.jpg" alt="" /></div>
<div class="menu" id="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" id="content">
  <h1>Hello world</h1>
  <p>Content paragraph 1</p>
  <p>Content paragraph 2</p>
  <p>Content paragraph 3</p>
</div>
</div>
</body>
</html>

**frankvw** · 07-28-2010, 02:04 AM

Ryan, Tirna,

Thanks for replying!

At this point I am somewhat confused and concerned. All I had managed to find so far (and your posts confirmed this) are work-arounds: either use a single background image for both columns, or use Javascript.

So. After all the Best Practices stating that one should use CSS instead of tables to control lay-out, it turns out that CSS (CSS2 at least) won't even let you do simple things like attach tiling backgrounds to separate cells and have the bottom edges line up properly? And it takes kludges to overcome this limitations?

Hm. Never had that problem with tables...

Anyway. Thanks for your response. At least now I know where I stand.

Cheers!

// Frank

**tirna** · 07-28-2010, 03:00 AM

no problem

I still believe non table layouts with css is the way to go.

With more complex layouts, tables and especially if you start using nested tables, the code will result in much more code and can get messy very quickly.

**frankvw** · 07-28-2010, 09:58 AM

Originally Posted by tirna

I still believe non table layouts with css is the way to go.

Oh, I won't argue that - if only for the fact that for screen media (your average 'puter monitor) you need different positioning than for hand held media (iPhone, Blackberry etc.) and tables coded into HTML tie you into a certain cell order while CSS can be switched by media type. And then there's the simple fact that separating styles from content is always a Good Thing, and tables in HTML interfere with that big time. So I agree with you there.

It's just that I cannot understand that more than a decade into the 21st century something as elementary as making column bottom margins line up and making a background image tile all the way to the bottom of the column is simply not possible with pure CSS as easy as it was with tables and we need to resort to inelegant kludges to work around that omission.

But maybe that's just me.

// Frank

**aj_nsc** · 07-28-2010, 10:09 AM

You view them as "workarounds" because you (as most of us did at some point) came from a world of designing using tables where these things were possible using a specific method.

These techniques are still possible, albeit by alternate methods. That doesn't make them "workarounds" it just makes them....well, alternate methods.

I haven't really read thoroughly the other posts in this thread but the way to do this (and I believe it was suggested) is to use three divs for your content area.

HTML Code:

<div id="content">
 <div id="leftcol">&nbsp;</div>
 <div id="rightcol">&nbsp;</div>
</div>

You have to apply the background image to #content and tile it vertically. Then, float both columns to the left and apply overflow: hidden on #content to get it the background image to go all the way to the bottom of "both" columns.

Once you become more familiar with CSS methods and techniques, you'll just know these methods as second nature and you won't view them as "workarounds" or things like that, you'll just view them as the tricks of the trade when working with CSS.

**frankvw** · 08-04-2010, 04:17 AM

Originally Posted by aj_nsc

You view them as "workarounds" because you (as most of us did at some point) came from a world of designing using tables where these things were possible using a specific method.

You're not wrong, but maybe you could be more right. :-) I think my point of view comes mostly from expecting things to be simple and straightforward, e.g. having an object (whatever that may be, in this case it's a column) and expecting sensible, pragmatic methods to be available in order to use that object and make it function in the real world. Tables and table cells are a good example: you assign a tiling background to a table, and it will cover the entire table.

Not so with CSS; you slap a <span> or <div> around the area you want to use, you fill it with content, and you assign properties to it. Which means that said properties will only apply to the part between the opening and closing tags of whatever it is that you assign them to, and the amount of screen real estate that they cover depend on the content that fills it. From a systems standpoint this makes total sense - but from a pragmatic, practical, real-world standpoint where this is NOT what you want to do, it doesn't. I'd be much happier if CSS was designed with ease of use in mind, rather than according to an internal logic which makes sense only as far as those internal logics are concerned.

In short, drawing a rectangle on the screen, having the bottom edge line up correctly, and assigning background properties to it regardless of the content that's in it, is such an every-day, elementary job in web design that it should be simple and straightforward to do, which with CSS it just isn't. That is what I mean with "workaround".

// Frank

These techniques are still possible, albeit by alternate methods. That doesn't make them "workarounds" it just makes them....well, alternate methods.

I haven't really read thoroughly the other posts in this thread but the way to do this (and I believe it was suggested) is to use three divs for your content area.

HTML Code:

<div id="content">
 <div id="leftcol">&nbsp;</div>
 <div id="rightcol">&nbsp;</div>
</div>

You have to apply the background image to #content and tile it vertically. Then, float both columns to the left and apply overflow: hidden on #content to get it the background image to go all the way to the bottom of "both" columns.

Once you become more familiar with CSS methods and techniques, you'll just know these methods as second nature and you won't view them as "workarounds" or things like that, you'll just view them as the tricks of the trade when working with CSS.[/QUOTE]

**frankvw** · 08-04-2010, 04:18 AM

Originally Posted by aj_nsc

You view them as "workarounds" because you (as most of us did at some point) came from a world of designing using tables where these things were possible using a specific method.

You're not wrong, but maybe you could be more right. :-) I think my point of view comes mostly from expecting things to be simple and straightforward, e.g. having an object (whatever that may be, in this case it's a column) and expecting sensible, pragmatic methods to be available in order to use that object and make it function in the real world. Tables and table cells are a good example: you assign a tiling background to a table, and it will cover the entire table.

Not so with CSS; you slap a <span> or <div> around the area you want to use, you fill it with content, and you assign properties to it. Which means that said properties will only apply to the part between the opening and closing tags of whatever it is that you assign them to, and the amount of screen real estate that they cover depend on the content that fills it. From a systems standpoint this makes total sense - but from a pragmatic, practical, real-world standpoint where this is NOT what you want to do, it doesn't. I'd be much happier if CSS was designed with ease of use in mind, rather than according to an internal logic which makes sense only as far as those internal logics are concerned.

In short, drawing a rectangle on the screen, having the bottom edge line up correctly, and assigning background properties to it regardless of the content that's in it, is such an every-day, elementary job in web design that it should be simple and straightforward to do, which with CSS it just isn't. That is what I mean with "workaround".

// Frank

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions