i'm really stumped by this current page i'm working on. The layout is a grid.
The page is dynamic so the cells (divs) will be shifting about or even disappearing over time.
Because the location of the last cell will be changing, i want this last cell(div) to always extend horizontally across the remainder of the containing div. The point being to create a gray top border.
here's a link, it's obvious to see what i'm trying to do.
i thought it would be easy. i thought the last cell (div) if not given a width attribute would naturally take up the remaining space in the row but it's not (?)
the class of this div is .last-cell.
i tried making the width:100% but that doesn't work. that breaks the page. the cell clears and starts a new row, i tried clear:none so it would stay floated to left but that didn't work. this can't be that hard...?? can anyone lend some advice on this?,
Are you still working on this? I don't understand the effect you want. You are showing a checkerboard grid with 11 items, the last being the "pair of ... side plates" at the far left of the fifth row. The css for .last-cell looks like you want to fill all the space to the right of that item with a pink background and top and left borders styled:1px solid #939598. I was able to do that by copying your code and setting the css width to 79.9% in the jQuery routine.
So I'm wondering if you could somehow calculate the width in pixels or % filled per row as you write out the html so you know how wide to make the last cell? Then couldn't you just include the correct width in an inline style for that item?
Belated thanks for responding to my post. Not sure what you meant by jQuery routine.
The challenge is that because this is a dynamic page, the last cell is going to vary in width as products get bought, or added. in other words, the width of the cell is not static and cannot be coded with a fixed width.
but it does need to always fill up the remainder of the table width, thereby supplying to top gray border