[css] display: table-cell and negative margins

[kiwus]

Hi,
I’m really stuck and client is getting annoyed so straight to the point.
What I need to achieve is something like this
[img]http://img14.imageshack.us/img14/771/29474135.th.gif[/img]
as you can see there are "two pairs" of corners with different sizes, besides the rows and columns have to overlap corners. After much pain and frustration the only thing close to working was div’s with display: table-cell property. But now i can’t figure out how to make the columns and rows overlap them.

current version
http://www.kiwus.vizz.pl/demo/
edit: as you can see it just needs a little tweaking…if left column and bottom row moved up by 12px it would have done it

[dloewen]

Hi kiwus,

If you only need flexible height, I would use a structure like this:

Code:

 

Text here

 

In your css, .top would have a background image with the top-row of pieces, including the whole corner piece as well.
.bottom would have the be the same deal, with the flipped image.
.wrapper would have a background image with both columns of the pieces, and have repeat-y on it. It would also need overflow: auto so it expands to fit the content.

[kiwus]

Thanks for your interest but unfortunately that’s not what i need to create. It’s a bit more complicated.
The whole "box" has to expand horizontaly and vertically, additionaly every "puzzle" piece has to be an actual img, not background. The reason for that is that their number (in width and height) will be generated dynamically and each element needs to change color upon click, but that’s beside the problem here. The only issue is to style css properly, which makes me sick everything i tried seems to work by 90%. Nothing is a complete solution…

btw: i tried making it regular divs with floats, regular html tables, making just 1 cell with 3 rows, making it 3×3 grid…as I said divs with display table properties seem to be most likely to work AFAIK.

[Author]

Posts