4 column div row

4 column div row to replace 4 column 1 row table

[Katie_Venra]

Ok.

I searched the CSS forum and couldnt find anything relating to this so here we go.

I have a standard 2 column with header and footer CSS layout which has now replaced an old table formatted layout.

There's only one table left, and it's got me completely lost....

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="342" valign="top"> <!-- #BeginEditable "header" --><img border="0" src="../images/temp/blankhead.jpg" width="321" height="88" alt="blank header"><!-- #EndEditable --></td>
<td width="256" valign="top">
<b>Updates</b> - October</td>
<td width="239" valign="top"><b>Latest Posts</td>
<td valign="bottom" align="right">
<div class="menu1">
<div class="top1">
<h5></h5>
<br>
<a href="../addclan.htm">
<img src="../images/submitclan.gif" width="128" height="50" border="0" alt="submit star trek clan">
</a>
<a href="http://www.startrek-gamers.com/downloads/pafiledb.php?action=userupload">
<img src="../images/submitmod.gif" width="128" height="50" border="0" alt="submit star trek mod"></a><br>
<br>
</div>
</div>
</td>
</tr>
</table>

That table sits directly between the header div and the div below which holds the content, effectively its shoved into the div layouts and it seems to have worked...well, kind of, there's a formatting problem with firefox but it's hardly noticeable.

Is there a div which has 4 columns which can be inserted into the code to replace the existing table and still work with a standard 2 column header and footer CSS div layout?

Or should i just keep this single table in as a "tip of the hat" to the early days of my sites 6 year history?

Or maybe i should just take up fishing? Less stressful than all this CSS stuff :(

[sldesigns]

I'm hardly an expert, but I was playing with a bit and it seems to me it depends on what you want the end result to be. Right now, middle columns seem to expand and contract with resize.
I do know that one div in itself won't work.
I was trying 4 divs, floated inline next to each other, with the widths of your tables, ie:
div1 {width:324px; float:left; display:inline;}

but on window resize, the last div will wrap and fall below the third div, etc. To prevent them from doing that in my designs I've wrapped them into a container div to hold them together.

So, it depends on how liquid you need it to be, if your page has a size (is the table 100% of any size, or 100% of an 800px container?) etc.

Try starting a new document with the table and then build 4 divs underneath it to compare. Make sure to add a background color or a border to the divs so you can see what each div is doing. Then you'll need to experiment with widths, putting two or more inside other divs, etc to see what works best for your needs.
I've also found it helpful to indent the code as I'm working, to keep track of layers of divs and remember which </div> closes what!

good luck

[Katie_Venra]

Tried what you advised, and your right, the div's do end up sliding down one another.

Guess tables in general websites for actually holding content in place is still needed in some extreme circumstances.

[sldesigns]

If you have a total of 5 divs, you can prevent the sliding. The extra one is a container, so your code looks like this:

<div id="container">
<div id="one"> content </div>
<div id="two"> content </div>
<div id="three">content </div>
<div id="four"> content </div>
</div>

give container the width you want the others to stay inside of (80% or 650px or such). That will stop the columns from moving down.

I don't have any 4-column layouts at my fingertips right now, but if you do a google search for css 4-column there are lots out there you can copy and adjust for your needs. It's a great way to learn.