Some simple div nesting issues

[thesavior]

On my page here:

http://dev.powerwd.net/designs/

I am having quite a few html issues with the center forum boxes.

First of all, where the icons are on the left, there is a white area underneath them that shouldnt be there, and the border on the lft isnt going all the way down. So the icon row needs to be the full height of the rest of the row.

In the main box where it says "Forum Name" and "This is a description of the forum." there is a double border on the top.

Where it says "1234 Posts" and "2345 Topics" there is no border on the bottom of that box.

And lastly, on the box where it says "Last post by...On...Topic..." There is no border on the right hand side, and a double border on the top.

these problems shouldnt be arising, the code looks right to me, but I have no idea what is going on.

Anybody have any ideas how to fix any or all of these problems?

[koyama]

Remember that floats don't expand their container. This holds for your <div>'s with class="forum_row". They have a vanishing height. That is why you are seeing a 'double' border at the top. You'll need to clear the floats properly using some technique (http://css-discuss.incutio.com/?page=ClearingSpace).

For example like this:

.forum_row {
overflow: auto;
zoom: 1; /* for IE6 */
}


Before embarking on this path, I would perhaps reconsider whether using tables for the listings wouldn't be better (instead of floated divs for each row).

I think this would solve many of the styling problems. You would avoid float dropping as well (try to scale the font-size using CTRL+/- and you'll see how the layout breaks).

[thesavior]

I was thinking about using tables, but I wasnt even able to get to this point with tables. If I can get things to vertically align using tables I would be willing to, but I was having issues with this.

[koyama]

If I can get things to vertically align using tables I would be willing to, but I was having issues with this.
I don't know what difficulties you are referring to. In fact, centering vertically may be hard to achieve unless you use tables.

To e.g. vertically align cell contents to the top, use td {vertical-align: top}

[thesavior]

This is how far I got with tables:

http://dev.powerwd.net/designs/tables.html

I added css, but i still couldn't get it to work. Things don't line up and fall together.

Excuse my ignorance towards tables, its been about 3 years since ive used them, and I have made a point of not even touching them until today.

[koyama]

This is how far I got with tables:
http://dev.powerwd.net/designs/tables.html

I would use the table only to provide the basic grid. This means using a table with 4 columns and 3 rows for your listing of forums (12 cells). Within each cell, don't nest another table, but use ordinary <div>'s and <span>'s.

Currently you are nesting <tr> elements directly within <td> elements. Not even valid markup!

[thesavior]

isnt that how you make a new row in tables? you put td's inside of the table cell? hmm, i hate tables. :P

[thesavior]

Okay, having the internal div's helped out alot.

Here is what I have:

http://dev.powerwd.net/designs/tables.html

But can i politely ask for some help styling the css? Table styling is extremely frustrating to me, so I just need to be pointed in the right direction.

*sorry for double post*

[koyama]

If you want a 'neutral' grid use

<table cellspacing="0">
...
</table>


td {
padding: 0;
vertical-align: top;
}

This eliminates all spacing around and within the cells. And cell contents is top aligned. Eventually you probably also want to assign widths to the td's.

Now see how far you get. I am quite sure you are on the right path.

[thesavior]

Thanks alot, I think Im all set. Here is my final structure:

http://dev.powerwd.net/designs/tables.html