CSS/Tables issue on mac

Question

I'm experiencing some problems with CSS and/or tables on my newly redesigned website. Because of the well known "100% div height"-issue, I have resorted to using tables as a structural element of the website. So it looks something like this:

HTML MARKUP:

<div id="header">...</div>
  <table>
  <tr>
    <td><div id="main">...</div></td>
    <td class="crighttd"><div id="cright">...</div></td>
   </tr>
</table>
<div id="footer">...</div>

AND CORRESPONDING CSS

table {
  border-top: 1px solid #6A6A6A;
  padding: 0;
  margin-top: 20px;
  border-spacing: 0
}

td {
  vertical-align: top;
  padding:0;
  margin:0
}

.crighttd {
  background: #4F4F4F;
  vertical-align:top;
  margin: 0
}

#cright {
  width: 185px;
  float: right;
  background: #4F4F4F;
  height: 100%;
  line-height: 1.2em;
  margin: 0;
  padding: 25px 0 25px 20px;
}

The issue here is that apparently the td on the right will not display at all in certain browsers (have seen this on Mac as well as on old instances of IE). Is this a CSS problem or something with the tables ?

Answer 1

For troubleshooting, I usually give my divs and other elements a border so I can visually see where they are located on the page.

border: 1px solid red;

I have a suspicion that its not your td that is not displaying, but rather the div you have inside it. You can try setting the display property on it in css.

position: relative;

You can also try removing the float property from your #cright style.

These won't necessarily fix your problem, but rather are just suggestions on how to troubleshoot. Its difficult to actually troubleshoot the problem without seeing the complete layout of your page.

Answer 2

Because of the well known "100% div height"-issue …

and which one would that be? The one solved here? Basically, the important part is

html, body {
    height: 100%;
}

Tables as a workaround are a no-go here because as far as I know, they have similar problems concerning the height.

Answer 3

I'm sure what you are trying to achieve is perfectly possible with CSS positioning and layout alone without the need to resort to a table for layout.

It sounds as though the tables aren't working anyway, so go for a pure CSS layout and not only will you probably find a solution but you'll also have a more conformable, standards compliant site to be proud of that will be easier to maintain and change in the future.

As far as I can tell you are aiming for a fairly simple fixed-width, centred, two column layout. A quick Google search for '2 column css layout' will provide you with plenty of examples and tutorials on the approaches you can use to achieve this.