Take a look at how my test page is currently set up:
I want the table (created using divs, not tables) to have 4 columns that are equally spaced with borders of 1 white pixel overlapping each other horizontally. This means there should be exactly 1 white pixel separating them. I understand that setting their borders to 1px will create a 2-pixel gap between them and they should take up the entire width of the containing div.
This is what my CSS looks like:
div.threadsrow:nth-of-type(2n+0)
{
background-color: #ccc;
}
div.threadsrow:nth-of-type(2n+1)
{
background-color: #F9C624;
}
div#threads
{
width: 100%;
border: 5px solid #333;
padding: 0px;
}
div.threadscol
{
display: inline-block;
width: 24%;
margin: 0px;
border: 1px solid #fff;
text-align: center;
}
And here's the HTML code I'm working with:
<div id="threads">
<div class="threadsrow">
<div class="threadscol"><p><b>Title</b></p></div>
<div class="threadscol"><p><b>Creator</b></p></div>
<div class="threadscol"><p><b>Last Post Time/Date</b></p></div>
<div class="threadscol"><p><b>Number of Posts</b></p></div>
</div>
<div class="threadsrow">
<div class="threadscol"><p>Foo</p></div>
<div class="threadscol"><p>Joe</p></div>
<div class="threadscol"><p>11:49/4/16/2013</p></div>
<div class="threadscol"><p>0</p></div>
</div>
<div class="threadsrow">
<div class="threadscol"><p>Bar</p></div>
<div class="threadscol"><p>Jack</p></div>
<div class="threadscol"><p>11:34/4/16/2013</p></div>
<div class="threadscol"><p>0</p></div>
</div>
</div>
When adjusting the column width to 25%, the columns move down to the next line. Even changing the border to 0px doesn't fix this issue. Can someone help me understand why this is happening?
As a new web developer, I find myself getting stuck on these concepts easily even after two months of experience. If anyone could explain the logic behind achieving the formatting I want, it would be greatly appreciated!