I have the following problem:
I need a simple, tabular layout in a webshop.
- left column: navigation column with approx. 170px width
- right column: content area
the goal: the left column should contain a few "boxes" (these are HTML-
tables) which should be all of the same width.
So, I attributed the left column with 'width="170"' and assigned the
attribute 'width="100%"' to all contained <table>s. This should
guarantee that the <table>s fill up the entire table column space.
The problem:
If some content of one of the <table>s is wider than 170px and thus
forces the entire left column to be wider than 170px, then all other
<table>s are shown STILL WITH A WIDTH OF 170px, thus not consuming the
available space (suggested by width=100%) but just consuming 170px.
The culprit in my sample HTML code (see below) is the table cell with
the "nowrap" attribute, which contains a phone number. It is the cell
shown with a light green background.
MY QUESTION:
How can I force IE (version 5.5) to display all <table>s in the left
column with the same width, that is, the width of 170px - or the width
of the widest table width, if it is wider than 170px and thus forces the
column width to be wider than 170px?
In Firefox it looks perfectly, but in the IE...
Thanx for all useful hints!
Alex
Here is my sample HTML code:
<html>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0099cc" width="170" valign="top">
<table width="100%" border="0">
<tr>
<td bgcolor="#008000">
This cell should be very next to the next cell (the right one,
with the same dark green background), with no pixel in between.
</td>
</tr>
</table>
<br>
<table width="100%" border="0">
<tr>
<td bgcolor="#ff2020">HEADING 1 - this heading should span the
whole width of the table column with the blue background color</td>
</tr>
<tr>
<td class="serviceBg"> This is just ordinary text, really
really ordinary
text, indeed very ordinary - this is just ordinary text,
well, it
is quite ordinary, yes it is. </td>
</tr>
</table>
<br>
<table width="100%" border="0">
<tr>
<td bgcolor="#ff2020">HEADING 2</td>
</tr>
<tr>
<td bgcolor="#00ff33">
<table border="0">
<tr>
<td nowrap="nowrap">
Phone: 0666 65465464564564565
<br>
This is the culprit!
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</td>
<td bgcolor="#008000" nowrap>Content area...</td>
</tr>
</table>
</body>
</html>
--
remove underscore+nospam if you want to mail me
