I am laying out a page, and I am trying to decide how best to do it. I want the basic structure of the page to be laid out as a table with 3 rows and 2 columns - the top and bottom (header and footer) span 2 columns, so are just really one cell, and the middle row has 2 columns (left and right), with the left about 30% of the screen, but no smaller than 250px. I would like each section (header, left, right, footer) to be contained in their own div.
I figure this can be accomplished in one of the following ways:
a) use a table structured as described above w/ a div inside of each cell (4 total)
<table width="100%" border="0">
<tr>
<td colspan="2"><div id="header" class="header">Header Content</div></td>
</tr>
<tr>
<td><div id="left" class="left">Left Content</div></td>
<td><div id="right" class="right">Right Content</div></td>
</tr>
<tr>
<td colspan="2"><div id="footer" class="footer">Footer Content</div></td>
</tr>
</table>
b) simulate that same table structure using only divs.
<div id="header" class="header">Header Content</div>
<div id="left" class="left">Left Content</div>
<div id="right" class="right">Right Content</div>
<div id="footer" class="footer">Footer Content</div>
I want to use divs b/c the content in the left column and right column can change, and I want scroll bars to appear if the content becomes larger than the div (using "overflow: auto", I believe).
I need a cross-browser solution, so if anyone can help me out, it would be greatly appreciated.Float would be the safest <!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/beck.htm">http://www.xhtmlcoder.com/beck.htm</a><!-- m --> is a basic starting point example of such a layout feel free to read the CSS file.
Obviously you ask for a little more but that is easily modified though don't expect Netscape 4.x to display the pages correctly.I took a look at your page and the css, and I tried to apply it to mine. However, when I view in in IE6 and NS7.1, it is screwy.
In IE, the header, left, and right divs are fine, but the footer div is not where it should be. I added some dummy code to the left div so it would overflow, and it is much taller than the right. So, I would expect the footer to be at the bottom of the bottom of the left div. Instead, it is directly below the right dive, and cutting behind the left div.
In NS, the header and left are ok, but the right div is at the bottom of the left div, and the footer div is just below the header div, again, cutting behind the left div.
I have attached the code I am using - can you take a look and tell me what I am doing wrong? Thanks.Forgot to attach the file.....
I figure this can be accomplished in one of the following ways:
a) use a table structured as described above w/ a div inside of each cell (4 total)
<table width="100%" border="0">
<tr>
<td colspan="2"><div id="header" class="header">Header Content</div></td>
</tr>
<tr>
<td><div id="left" class="left">Left Content</div></td>
<td><div id="right" class="right">Right Content</div></td>
</tr>
<tr>
<td colspan="2"><div id="footer" class="footer">Footer Content</div></td>
</tr>
</table>
b) simulate that same table structure using only divs.
<div id="header" class="header">Header Content</div>
<div id="left" class="left">Left Content</div>
<div id="right" class="right">Right Content</div>
<div id="footer" class="footer">Footer Content</div>
I want to use divs b/c the content in the left column and right column can change, and I want scroll bars to appear if the content becomes larger than the div (using "overflow: auto", I believe).
I need a cross-browser solution, so if anyone can help me out, it would be greatly appreciated.Float would be the safest <!-- m --><a class="postlink" href="http://www.xhtmlcoder.com/beck.htm">http://www.xhtmlcoder.com/beck.htm</a><!-- m --> is a basic starting point example of such a layout feel free to read the CSS file.
Obviously you ask for a little more but that is easily modified though don't expect Netscape 4.x to display the pages correctly.I took a look at your page and the css, and I tried to apply it to mine. However, when I view in in IE6 and NS7.1, it is screwy.
In IE, the header, left, and right divs are fine, but the footer div is not where it should be. I added some dummy code to the left div so it would overflow, and it is much taller than the right. So, I would expect the footer to be at the bottom of the bottom of the left div. Instead, it is directly below the right dive, and cutting behind the left div.
In NS, the header and left are ok, but the right div is at the bottom of the left div, and the footer div is just below the header div, again, cutting behind the left div.
I have attached the code I am using - can you take a look and tell me what I am doing wrong? Thanks.Forgot to attach the file.....