Neverside

Getting DIVs to align like Tables

Okay, well, i've got a question for all you smart people taht know about div positioning and such.

Take a look at my website: www.tehacidx.tk (pardon the popup)

Most browsers have no problem with the way its set up. The only part that is causing a problem with a browser (firebird) is the tables i have containing my news items. If you open it up in Firebird the tables are misconstrued and misaligned, etc etc etc.

Firebird handles DIV's very well.

I'd basically like to convert those news-holding tables into div's that are exact replicas.

The only problems i have are:

1. I can't figure out how to get the divs to align automatically below each other like the tables do
     (I don't want to have to set a Top and Left space in a CSS file. I want it to just appear below one another like the tables do)
2. I don't know how i'd get the left cell (holding the AcidX image in the news items) to expand along with the text next to it when it gets longer.
3. I don't know how to get divs to position them selves next to each other like that, but also appear below each other automatically.

All help is greatly appreciated!!!

EDIT: Oh, and also, you'll notice that the javascript scrollers that are on the page don't work in firebird. Any idea why?

Last edited by Acid_X, January 4th, 2004 11:34 AM (Edited 1 times)

Quote:

Originally posted by Acid X
Take a look at my website: www.tehacidx.tk

All I see is a grey background. It's the same when I go to the actual URL (not the .tk frameset thing). I can see the source (and all your code) but nothing shows up.

Quote:

Originally posted by Acid X
Firebird handles DIV's very well.

That's partially correct. <div>'s by themselves do nothing, it's when you combine them with CSS that they start to look like something. Firebird just has a lot better CSS support than, say, IE.

Here's just a genearl note: When you design with <div>'s you are going to _have_ to think differently than you would if you were designing with <table>'s. You will _have_ to use CSS if you want to do anything with the <div>'s.

I'm not sure exactly what you mean in your first and last question. For the second, <div>'s automatically expand to hold their content. If, for some reason, they don't all you have to do is set the overflow property for that <div> (with CSS).

// freak

___________________

Tables for layout is an abuse. -- Internet Explorer is unsafe.

I want the divs to appear EXACTLY like the tables appear, and i want them to automatically go below one another (like when i use <br /> for instance) like the tables do.

With tables i can create a table, <br /><br />, make another table after those <br />'s, and they will appear below each other.

I want the DIVs to do the exact same thign.

If you coded your tables right they would show up in every browser. You obviously did something wrong when coding your site using tables.

Well, I'm sorry, Cory, if you want to use <div>'s then you are going to have to think differently when designing a web page.

If you give us some code and state specifically what you are having problems with I'm sure we can help you out further.

// freak

___________________

Tables for layout is an abuse. -- Internet Explorer is unsafe.

Ya mean like 1 column directly on top of another? Easy. Although divs should automatically stack on top of each other.

Code:

#col1 {
width: 300px;
}

#col2 {
clear: left;
width: 300px;
}

Code:

<div id="col1">Weee</div>
<div id="col2">Oooh</div>

Quote:

Originally posted by Radley
Ya mean like 1 column directly on top of another? Easy. Although divs should automatically stack on top of each other.

Code:

#col1 {
width: 300px;
}

#col2 {
clear: left;
width: 300px;
}

Code:

<div id="col1">Weee</div>
<div id="col2">Oooh</div>

The clear property is only used in conjunction with a float property, in this case it wouldn't be needed. Unless I'm missing out some extra code?

___________________

irc.efnet.net #neverside
Neverside merchandise!

Didn't know that but his divs should automatically stack.

Well, here is the part that i'm having problems with. It's the same setup for each isntance of the table. Each table is exactly the same, and appear below each other. I went ahead and removed the contents inside the table just to make it easier to read, and noted where it should be instead.

PHP:

<?php
        <table width="400" border="0" cellpadding="3" cellspacing="0">
        <tr>
        <td bgcolor="#4A4A4A" align="left"><b>Title</b></td>
        <td bgcolor="#3D3D3D" align="right" width="115" class="nwsdat">Date</td>
        </tr>
        </table>
        <table width="400" cellpadding="3" cellspacing="0" bgcolor="#4A4A4A" class="nwstbl">
        <tr>
        <td height="40" valign="top"><img src="img/nwspic.jpg" alt="" /></td>
        <td class="nwstxt" width="381" bgcolor="#333333" valign="top">Text</td>
        </tr>
        </table><br /><br />
?>

And i have it being surrounded by the following table, just because i dont really know how to make a div center everything (or atleast just tables) and make the text justified...

PHP:

<?php
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr><td align='center' valign='top'><br /><br /><br />

</td></tr></table>
?>

So all together the code inside my content DIV would look like this:

PHP:

<?php
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr><td align='center' valign='top'><br /><br /><br />

<table width="400" border="0" cellpadding="3" cellspacing="0">
        <tr>
        <td bgcolor="#4A4A4A" align="left"><b>Title</b></td>
        <td bgcolor="#3D3D3D" align="right" width="115" class="nwsdat">Date</td>
        </tr>
        </table>
        <table width="400" cellpadding="3" cellspacing="0" bgcolor="#4A4A4A" class="nwstbl">
        <tr>
        <td height="40" valign="top"><img src="img/nwspic.jpg" alt="" /></td>
        <td class="nwstxt" width="381" bgcolor="#333333" valign="top">Text</td>
        </tr>
        </table><br /><br />

Another table..

Nother one...

Nother....

</td></tr></table>
?>

All of the classes used in the tables themselves are correct, because it comes out right in IE.

Didn't you ask about div help?