Div Help

[bmass]

Alright, I am big on using tables personall but I have run into trouble with a script I am using, conflicting with tables, so I can't scroll with them. Could somebody please tell me if it is possible (and if so how) to recreate this using divs? Thanks.

<table width="454" align="left"><tr align="left"><td>Name</td><td>Member Group</td><td width="180">Ascociations</td><td>Contact</td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=5">Spartan</a></td>
<td><a href="">Black Hand</a></td>
<td width="180"><a href="admin.php">Admin</a>, <a href="management.php">Management</a></td>
<td><a href="mailto:spartan@thedarkbrotherhood.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=845">Torment</a></td>
<td><a href="">Black Hand</a></td>
<td width="180"><a href="admin.php">Admin</a>, <a href="management.php">Management</a></td>
<td><a href="mailto:torment@thedarkbrotherhood.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=75">Khamul</a></td>
<td><a href="">Black Hand</a></td>
<td width="180"><a href="management.php">Management</a>, <a href="level.php">Level Design</a>,<a href="game.php">Game Design</a></td>
<td><a href="mailto:rie_petersen54@hotmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=93">Fenbab</a></td>
<td><a href="">Speakers</a></td>
<td width="180"><a href="creative.php">Creative Design</a></td>
<td><a href="mailto:tonilalali@msn.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=435">Aracondal</a></td>
<td><a href="">Speakers</a></td>
<td width="180"><a href="admin.php">Admin</a>,<a href="creative.php">Creative Design</a></td>
<td><a href="mailto:aracondal@gmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=117">Cliffworms</a></td>
<td><a href="">Speakers</a></td>
<td width="180"><a href="level.php">Level Design</a>, <a href="game.php">Game Design</a></td>
<td><a href="mailto:mr__legault@hotmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=356">Rubberchrist</a></td>
<td><a href="">Speakers</a></td>
<td width="180"><a href="sound.php">Sound Design</a></td>
<td><a href="mailto:adambaumeister@yahoo.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=1916">Tasty</a></td>
<td><a href="">Speakers</a></td>
<td width="180"><a href="testing.php">Beta Testing</a></td>
<td><a href="mailto:seangreen2@gmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=1321">Guy</a></td>
<td><a href="">Brotherhood</a></td>
<td width="180"><a href="admin.php">Admin</a>, <a href="game.php">Game Design</a></td>
<td><a href="mailto:guy_misampbell@hotmail.co.uk">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=29">Sabotender</a></td>
<td><a href="">Brotherhood</a></td>
<td width="180"><a href="graphic.php">Graphic Design</a></td>
<td><a href="mailto:masterbezz@hotmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=138">Ferris</a></td>
<td><a href="">Brotherhood</a></td>
<td width="180"><a href="creative.php">Creative Design</a></td>
<td><a href="mailto:ferris.m@gmail.com">Email</a></td></tr>

<tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=322">D-Katana</a></td>
<td><a href="">Brotherhood</a></td>
<td width="180"><a href="creative.php">Creative Design</a></td>
<td><a href="gordon.shure@gmail.com">Email</a></td></tr>

</table>

[pacerier]

i supposed its better to use tables for your content. do you have a link to the page or the source code for it + the code for the script that is causing the problem. and sorry but what do you mean by can't scroll with them

[KDLA]

Do you mean something like this?
http://www.imaputz.com/cssStuff/bigFourVersion.html

KDLA

[bmass]

I have used several scripts and styles to allow scrolling without scrollbars (because they /really/ don't work with the site). The way it is set up, you can scroll with the mouse wheel, or by clicking on the text and using the up/down arrows. If I use tables in my main content then the scrolling does not work in Firefox, at least, not for the content area that uses tables.

Here is the page where I have set up the table (it is not finished, I stopped when I realized that I had this problem): http://www.vvclans.com/db/contact.php

P.S.

Do you mean something like this?
http://www.imaputz.com/cssStuff/bigFourVersion.html

KDLA

No, unfortuneatly not like this, I cannot use the table attribute anywhere within my main data.

[KDLA]

You can do this with floats, and then create a wrapper div with a max-height (Fx) and height (IE) setting, with an overflow property set to scroll.

KDLA

[bmass]

Alright how do I do that? And will that still allow me to use the invisible scrollbars?

[KDLA]

#wrapper {
height: ###px; /* fill in desired height */
max-height: ###px; /*same here */
overflow: scroll;
width: 99%;
border: 1px solid red;}
#column1 {
float: left;
width: 33%;
margin: 0;
}
#column2 {
width: 33%;
margin: 0;
}
#column3 {
float: right;
width: 33%;
margin: 0;
}

<div id="wrapper">
<div id="column1">
...
</div>
<div id="column3">
...
</div>
<div id="column2">
...
</div>
</div>

You'll want to tweak the values, but this will get you started.

KDLA

[bmass]

Cool thanks, and do I just use a new <div id='wrapper'> for each new row?

[KDLA]

Depends on where you want the scrollbar - a scrollbar per row, or a scrollbar for the entire table. Either way, it will work.

[bmass]

Is there anyway to do the entire table without using any scrollbar? The only reason I need to use divs is because the <table> property messes up the scrolling, I just need to recreate the table.

[KDLA]

Leave out the height, max-height, and overflow properties.
I must have misunderstood your request. This might work better:
(Code edited)

#wrapper {
width: 99%;
border: 1px solid red;}
.row {
clear: both;
display: block;
width: 100%;
}
.column1 {
float: left;
width: 33%;
margin: 0;
}
.column2 {
width: 33%;
margin: 0;
}
.column3 {
float: right;
width: 33%;
margin: 0;
}

<div id="wrapper">
<div class="row">
<span class="column1">Person 1's Name</span>
<span class="column3">Person 1's Email</span>
<span class="column2">Person 1's Info.</span>
</div>
<div class="row">
<span class="column1">Person 2's Name</span>
<span class="column3">Person 2's Email</span>
<span class="column2">Person 2's Info.</span>
</div>
</div>

KDLA

[bmass]

Thank you very very much. That was exactly what I was looking for, I really appreciate it.