"float" property problem...

[maya]

hi,

here,

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

<div class="entry"ha s 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]

Re: &quot;float&quo t; property problem...

maya wrote:

hi,
>
here,

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

>
<div class="entry"ha s 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]

Re: &quot;float&quo t; property problem...

Harlan Messinger wrote:

maya wrote:

>hi,
>>
>here,
>http://www.mayacove.com/design/sd/test2.html
>>
><div class="entry"ha s 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]

Re: &quot;float&quo t; property problem...

maya wrote:

Harlan Messinger wrote:

>maya wrote:

>>hi,
>>>
>>here,
>>http://www.mayacove.com/design/sd/test2.html
>>>
>><div class="entry"ha s 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]

Re: &quot;float&quo t; property problem...

In article <4818bdff$1@new s.x-privat.org>, maya <maya778899@yah oo.com>
wrote:

hi,
>
here,

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

>
<div class="entry"ha s 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.a u/floatHouse/>

helpful.

--
dorayme

[Bergamot]

Re: &quot;float&quo t; property problem...


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