6 replies [Last post]
moroz1999
Offline
Regular
Last seen: 15 years 20 weeks ago
Joined: 2007-01-03
Posts: 18
Points: 0

hello everybody. seems that I wasn't able to explain my problem in my previous topic, so I've made two example pages to properly illustrate what solution I'm looking for.

http://www.zone.ee/obmen/reference.htm - this is a visual example of what I'm trying to achive. There is a table of 3 cells: left and right cells have fixed width, center is not fixed and can be stretched according to contained data. all cells have different transparent png files on background.

http://www.zone.ee/obmen/test.htm - this is a what I'm getting when trying to achieve the same effect using floating divs. the main problem here is that transparent background of floating divs and div in center are overlapping.

how can this be done without tables?

please, note:
1. the whole structure SHOULD NOT have fixed width.
2. display: table, display: table-cell, and so on, should not be used, as they fail in more complicated cases, because there are no rowspan and colspan for them.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I haven't looked at your

I haven't looked at your code, BUT

Have you tried putting a left and right margin on the center div to clear the width of the right and left divs?

moroz1999
Offline
Regular
Last seen: 15 years 20 weeks ago
Joined: 2007-01-03
Posts: 18
Points: 0

Thanks for your answer, it

Thanks for your answer, it does really works fine!

But, it seems to me, that usage of margins in this case looks more like some dirty trick Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Not at all, this is the way

Not at all, this is the way we all (I hope) do it. I suspect margins are the most commonly used feature of css when applied to block level elements.

Do, however, remember that different browsers apply different default margins.

I start my css with this:

html,body,p,div,img,h1,h2,h3,h4,li,ul,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:0; border-spacing:0; } input,select{ margin:0; padding:0; }

Trevor

moroz1999
Offline
Regular
Last seen: 15 years 20 weeks ago
Joined: 2007-01-03
Posts: 18
Points: 0

thanks, seems like this is

thanks, seems like this is the only normal way to solve this problem.
btw, what does 'border-collapse:0' mean in your example? does the 'zero' (Innocent value do the same thing as 'separated'?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 12 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Border-collapse (by

Border-collapse (by definition) collapses adjacent borders.

Say you have two divs with no margin between them, and each has a 1px solid black border.

Where the two divs meet there will be a 2px border.

border-collapse collapses the duplicated border, so in this case there would only be a 1px border between the two elements.

And the use of margins isn't a dirty hack, it's the common methodology employed by most (if not all) CSS designers.

Verschwindende wrote:
  • CSS doesn't make pies

moroz1999
Offline
Regular
Last seen: 15 years 20 weeks ago
Joined: 2007-01-03
Posts: 18
Points: 0

thanks for the

thanks for the answering.

1. http://www.w3.org/TR/REC-CSS2/tables.html#propdef-border-collapse
according to this, zero is not a value for border-collapse property. am i right?

2. I didn't mean that margins themselves are a dirty hack Smile
I just meant, that, as far as I understand, margins were not intended for clearing the space for floats. But, anyway, if this is done according to CSS2 specs, this is not hack.