I was messing around with my layout, trying to fix some divs that were in a big table. I know that tables are not supposed to be used for layout, but somehow I still like to use them for big layouts as I mostly have various combinations of 2 or 3 columns under eachtother, and colspan/rowspan is so easy to use for that in a table. But the divs inside the cells were always too big and were coming over the internal border of the table. Those divs had a different background colour, so this was very clearly visible. In IE I could make it look good somehow, but in Firefox it was always overlapping. But in opera it did look good again, much like in IE. I was reading up on possible mistakes with this, came across topics of the broken box model, but since most of the overlapping was only in Firefox I thought it could not be this, but more likely bad usage of padding or margin or borders somewhere.
So I tried a lot of combinations with padding and margins, and when I set ‘width:95%’ for those divs then somehow it looked acceptable in all browsers. But the space next to wide cells was much bigger then those that were next to small cells, and even between the different browsers their were a lot of visible differences when it came to the actual width of the spaces between the divs. And no space between the divs looked like I wanted it to have, it was hard to control it to the pixel.
I dropped all those padding and margin attempts, so that I was back to the ‘normal’ overlapping I started with. I saw those divs that were too big for the place they were supposed to have in the table, so just as joke I thought : hey lets remove some of its width, that will punish them for being too big all the time… so I added ’ width:-30; ’ to the css of the div… I uploaded it … and suddenly everything looks perfectly right, in every browser I had.
A small negative number in width for a div prevents it from moving outside the table it is in, and makes sure every setting of padding or margin can be used like you want it
Did I ran into an unknown css hack ? Or is this common knowledge ? Atleast its new to me and I thought it might be interesting to share this experience. I did not found anything related to this when searching info about it.
Setting a negative width of a few pixels does sound very wrong though. I’m probably correcting an earlier mistake by adding a new one. And maybe there are more factors involved then just this negative width to make it work like this. The actual number that is used does not seem to matter much, as long as its more then the amount of pixels that the div was overlapping. But still, it now looks exactly like I want it in every browser I used, so what can be wrong about it ?