Table Column Alternative?

devilzfan300 · 07-18-2006, 06:14 PM

Please take a look at my working project, www.fantasysportswiz.com. In the middle of the page, in the second section, there is a list where I want headlines to go. The thing is, I want it divided into two columns, one on the left and one on the right.

How should I do this? Div tags? I really dont want to use tables, but if thats the only way then I guess I have to.

**John Scott** · 07-18-2006, 11:20 PM

Why don't you want to udse Div tags?

DaveyBoy · 07-18-2006, 11:31 PM

Cos he's a div

devilzfan300 · 07-19-2006, 08:06 AM

No, i DO want to use div tag, i DONT want to use the table tags. How do I do this?

chicgeek · 07-19-2006, 08:20 AM

In style:

Code:

.column {
float: left;
width: 50%;
}

In body:

Code:

<div class="column">left column</div>
<div class="column">right column</div>

Pretty much. You will want to add some padding or margins. Play around with it.

devilzfan300 · 07-19-2006, 09:16 AM

Ok, we got closer.....but now how do I fix this...?

(please look I cant even describe)

http://www.fantasysportswiz.com

chicgeek · 07-19-2006, 09:21 AM

Ah, my apologies. I forgot to clear.

After your two divs, put this:

Code:

<div style="clear: both;"></div>

But you may yet want to add padding. Here:

Code:

.column {
float: left;
width: 50%;
padding: 6px;
}

Feel free to add more padding. I don't know what you're going for in terms of spacing. Let me know if it turns out to your liking.

devilzfan300 · 07-19-2006, 09:43 AM

The div clear code worked perfectly, but now when I add padding, it misaligns the two columns so that the second column is pushed down a little.

It is perfect now, I just want more space between "Top Headlines" and "NFL Top Headlines"

chicgeek · 07-19-2006, 09:49 AM

Code:

.column {
float: left;
width: 50%;
padding: 12px 8px 0px 8px;
}

Play around with padding. The order is: top right bottom left.

*edited*

devilzfan300 · 07-19-2006, 09:51 AM

Thanks

devilzfan300 · 11-25-2006, 08:32 PM

Ok, I thought this was working fine, but I installed firefox, and it doesnt work. Please see the site (http://www.fantasysportswiz.com).
Edit: If you dont have firefox, shame on you. The problem is that instead of makin the second column on the right side, it puts it below the first one....

aryo · 11-25-2006, 10:02 PM

decrease the width until it fits nicely. 40-45% should be fine.

edit: i'd have to admit it's pretty frustrating cuz padding is supposed to be between the element's border and its content. so logically, it doesn't make sense that adding padding would affect the element's width. it's not like we're defining a margin here.