I'm creating my website layout using CSS, I want it to look like a standard 3 columns portal with graphic modules inside. Each module is composed by 3 different parts (divs):
- top: the module title
- mid:the module content
- bot: the module bottom (background-image)
I need compatibility with new and old browsers (NS, Opera, IE 5.01, 5.5, 6...), so I avoid borders and just use background-images. The mid divs have a different left & right padding that allows their content not to overlap the graphic left & right borders.
All seemed to be ok but when I tried to put some content inside my modules I noticed a strange behavior with elements having top & bottom margins > 0. You can find my layout here:
In this demo template you can see what I mean (I used different colors to evidence different behaviors):
- the first left module (gray) shows my problem, the mid div is far from both the top div and the bot div because of the top & bottom margins of its content; the second is the same situation but without margins; this is how I'd like every module to be so, if possible, please find a solution here!!
- in the center modules (red) the mid div has 1px padding on each side (plus the left & right padding), this partially solves my problem (not with IE 5.01) but doing this I have a 1px frame around the content... and I don't like it!
- in the right modules (blue) I use paddings instead of margins and this solves the problem... but this requires nested divs.
Since I need to put into some modules a series of elements having the same distance on each side, I'd prefer to use margins instead of paddings... they will merge and I won't need to specify different paddings!
Please tell me that there's a way to workaround this!!