Table Positioning

[wrichards8]

I am trying to develop a forum system, inspired by phpBB, but I am having a problem with the table where I am outputting the list of forum topics. I have the following CSS relating to my table:
[syntax=css]
#container nav {
border-bottom: #000033 thin solid;
border-top: #000033 thin solid;
border-right: #000033 thin solid;
width: 15%; float: left;
color: #000033;
background: #FF9999;
}
#container nav h2 {
border-bottom: #000033 thin solid;
width: 100%; text-align: center;
background: #AAAAFF;
margin: 0; padding: 0;
color: #000000; font-size: 100%;
}
#container nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#container nav ul li a {
color: #000033;
}
#container .content h2 {
border-bottom: #000033 thin solid;
width: 100%; text-align: center;
background: #AAAAFF;
margin: 0; padding: 0;
color: #000000; font-size: 100%;
}
#container .content table {
width: 100%;
border-collapse: collapse;
}
#container .content thead {
border-bottom: #000033 thin solid;
background: #AAAAFF;
}
#container .content {
margin-left: 15%;
color: #000033;
background: #FF9999;
} [/syntax]

When I set the #container .content table width to 100%, I get this

and when I set the width to 85%, I get this


The effect I wanted is the table sitting alongside the <nav> block, the way it is when set to 85%, but taking up 100% of that space. I hope this makes sense to someone

[wrichards8]

I managed to sort it by setting the #container .content table to 99.9%

[killfrog47]

I managed to sort it by setting the #container .content table to 99.9%

Hello wrichards8 =) I would stay away from using tables for this. If I was you I would use list elements. phpBB actually uses list elements to display the forum posts and stuff.

[jacek]

As killfrog said it's a good idea to try and use more modern techniques for this sort of thing.

Saying that if you're just playing around and learning then it's a good place to start.

Also I think the reason it wrapped under the menu is because the border size is not included in the width so you had to subtract enough space off for it to fit.

[killfrog47]

Also I think the reason it wrapped under the menu is because the border size is not included in the width so you had to subtract enough space off for it to fit.

You could also do a box-sizing [syntax=css]box-sizing: border-box;[/syntax] on the div with the border. This should make the border count as part of the width. That way you dont have to account for it.