"float" property problem...

[maya]

hi,

here,
http://www.mayacove.com/design/sd/test2.html

<div class="entry"has a bottom-margin of 20px.. but it's ignored if
divs inside it have "float" property.. (put borders around divs for
testing purposes.. just like in my previous post, HTML and CSS both
validate..)
thank you...

[Harlan Messinger]

maya wrote:

hi,

here,
http://www.mayacove.com/design/sd/test2.html

<div class="entry"has a bottom-margin of 20px.. but it's ignored if
divs inside it have "float" property.. (put borders around divs for
testing purposes.. just like in my previous post, HTML and CSS both
validate..)

It isn't ignored. There are 20 pixels between the two entry boxes.

I think you're being confused by a couple of things. First, are you
aware of the difference between margin and padding? Margin is what's
outside the border (when there's a border), between the border and
neighboring elements. Padding is what's inside the border, between the
border and the content.

Besides that, I think you're not aware of everything involved in using
floats. In particular, floats don't occupy vertical space in their
containing element. The entry box that contains your two floats ends
right after it begins, and not beneath the two floats. The second entry
begins more or less at the top of the two floats. The only reason that
isn't obvious is that your floats have width 305 and you have them
constrained in a 630-pixel-wide table. Try removing the width on the
table and widening your browser to much more than 630 pixels and see
what happens--see where the first "attendee" headline appears.

Look for information on floats as well as on the CSS clear attribute at

http://www.w3.org/TR/CSS21/visuren.html#floats

[maya]

Harlan Messinger wrote:

maya wrote:

>hi,

here,
http://www.mayacove.com/design/sd/test2.html

<div class="entry"has a bottom-margin of 20px.. but it's ignored if
divs inside it have "float" property.. (put borders around divs for
testing purposes.. just like in my previous post, HTML and CSS both
validate..)

It isn't ignored. There are 20 pixels between the two entry boxes.

I think you're being confused by a couple of things. First, are you
aware of the difference between margin and padding? Margin is what's
outside the border (when there's a border), between the border and
neighboring elements. Padding is what's inside the border, between the
border and the content.

Besides that, I think you're not aware of everything involved in using
floats. In particular, floats don't occupy vertical space in their
containing element. The entry box that contains your two floats ends
right after it begins, and not beneath the two floats. The second entry
begins more or less at the top of the two floats. The only reason that
isn't obvious is that your floats have width 305 and you have them
constrained in a 630-pixel-wide table. Try removing the width on the
table and widening your browser to much more than 630 pixels and see
what happens--see where the first "attendee" headline appears.

Look for information on floats as well as on the CSS clear attribute at

http://www.w3.org/TR/CSS21/visuren.html#floats

oh brother.. thank you Harlan....

personally for layouts I prefer using tables to do the main grid of the
layout, then maybe inside put divs; but where I work most folks prefer
div-based layouts, so I always make an effort, but I always end up
getting in trouble as soon as I try something a bit more complex..

I do know difference between padding and margin.. problem is that
recently I found out that padding, if you use it inside a <td>, it ADDS
to the width of the <td(not sure if this also happens with divs..) so
now am trying to use padding as little as possible..

(I tried both bottom-padding and bottom-margin with this one, neither
one worked.. also tried using "clear" property, also didn't work...)

thank you again..

[Harlan Messinger]

maya wrote:

Harlan Messinger wrote:

>maya wrote:

>>hi,

here,
http://www.mayacove.com/design/sd/test2.html

<div class="entry"has a bottom-margin of 20px.. but it's ignored if
divs inside it have "float" property.. (put borders around divs for
testing purposes.. just like in my previous post, HTML and CSS both
validate..)

It isn't ignored. There are 20 pixels between the two entry boxes.

I think you're being confused by a couple of things. First, are you
aware of the difference between margin and padding? Margin is what's
outside the border (when there's a border), between the border and
neighboring elements. Padding is what's inside the border, between the
border and the content.

Besides that, I think you're not aware of everything involved in using
floats. In particular, floats don't occupy vertical space in their
containing element. The entry box that contains your two floats ends
right after it begins, and not beneath the two floats. The second
entry begins more or less at the top of the two floats. The only
reason that isn't obvious is that your floats have width 305 and you
have them constrained in a 630-pixel-wide table. Try removing the
width on the table and widening your browser to much more than 630
pixels and see what happens--see where the first "attendee" headline
appears.

Look for information on floats as well as on the CSS clear attribute at

http://www.w3.org/TR/CSS21/visuren.html#floats

oh brother.. thank you Harlan....

personally for layouts I prefer using tables to do the main grid of the
layout, then maybe inside put divs; but where I work most folks prefer
div-based layouts, so I always make an effort, but I always end up
getting in trouble as soon as I try something a bit more complex..

I do know difference between padding and margin.. problem is that
recently I found out that padding, if you use it inside a <td>, it ADDS
to the width of the <td(not sure if this also happens with divs..) so
now am trying to use padding as little as possible..

Hmm? Padding-bottom and padding-top shouldn't have any effect at all on
the cell's width.

(I tried both bottom-padding and bottom-margin with this one, neither
one worked.. also tried using "clear" property, also didn't work...)

Well--as I tried to suggest before, you may not be seeing it "work"
because you're misinterpreting which of the borders belongs to each of
the elements. And as I noted, there IS a 20px gap between pairs of
borders, the work of your margin-bottom, so if you think it isn't
working, then you may be expecting something else.

For the sake of illustration, try creating THREE classes--entry1,
entry2, and entry3--with the same properties set for each, except with a
different border color, and set border instead of just border-top, so
you can see which DIV is which on your page.

[dorayme]

In article <48********@news.x-privat.org>, maya <ma********@yahoo.com>
wrote:

hi,

here,
http://www.mayacove.com/design/sd/test2.html

<div class="entry"has a bottom-margin of 20px.. but it's ignored if
divs inside it have "float" property.. (put borders around divs for
testing purposes.. just like in my previous post, HTML and CSS both
validate..)

Perhaps you would find

<http://netweaver.com.au/floatHouse/>

helpful.

--
dorayme

[Bergamot]

maya wrote:

>>>
http://www.mayacove.com/design/sd/test2.html

personally for layouts I prefer using tables to do the main grid of the
layout, then maybe inside put divs; but where I work most folks prefer
div-based layouts, so I always make an effort, but I always end up
getting in trouble as soon as I try something a bit more complex..

After all the times you've posted here in the past few months, and all
the tutorials, articles and advice you've been given, it seems you still
haven't learned anything.

You'll forever be hacking away unsuccessfully and getting frustrated
with your failures unless you take the time to *learn* this stuff. Buy a
book or 3 and read them. For quick online resources, start here:
http://brainjar.com/css/positioning/
http://www.htmldog.com/

Read up on collapsing margins, too. The subject has come up here
numerous times so you should find all the info you could ever want in
the group archives.

Get rid of the impending div-itis while you're at it:
http://microformats.org/wiki/posh

recently I found out that padding, if you use it inside a <td>, it ADDS
to the width of the <td(not sure if this also happens with divs..)

If you understood the CSS box model, you would know the answer to that.

--
Berg