CSS Table layout: make rows span full width without centering cells

Question

I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.

Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.

I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/

I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.

How can I fix this issue?

Answer 1

You can add this into the CSS, it's a hack, but works very well with table layout.

.item p {
    width: 100%;
}

https://jsfiddle.net/4dbgnqha/8/

Answer 2

you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:

.item p {
    margin: 0px;
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens