clearing floats to content edge

[yb]

Hi,

Is there a CSS method to clear a float such that it aligns with the
left content edge.

For example:

X X X
X X X
X X
X
X O
X O

The "X" floats are the first 3 floats, and the "O" is the last

I would like the "O" float to clear the other three, and appear under
the "X" floats. The width is dynamic, so I can't use "clear : left".
i.e. there could be arbitrary "X" floats and heights.

unfortunately inline-blocks aren't well supported, so that isn't an
option either

any ideas?

thank you

[Ben C]

On 2007-03-13, yb <ba*********@yahoo.cawrote:

Hi,

Is there a CSS method to clear a float such that it aligns with the
left content edge.

For example:

X X X
X X X
X X
X
X O
X O

The "X" floats are the first 3 floats, and the "O" is the last

I would like the "O" float to clear the other three, and appear under
the "X" floats. The width is dynamic, so I can't use "clear : left".
i.e. there could be arbitrary "X" floats and heights.

unfortunately inline-blocks aren't well supported, so that isn't an
option either

any ideas?

You could try nesting the floats, so

X X
X X
X
O
O

is all put into a new float which itself contains the two X floats and
the O float with clear set on the O float.

Remember: there is no problem that cannot be solved with another level
of nesting (variant of old programming proverb).

[Bergamot]

yb wrote:

>
Is there a CSS method to clear a float such that it aligns with the
left content edge.

Why, yes.

clear:left;

;)

--
Berg

[yb]

Why, yes.

>
clear:left;

I wish it were so easy :) I have to say my explanation of the problem
was terrible, please see the example here:

http://www.yasweb.com/ie_solution.html

When resizing the window, notice how the "blocks" (they are inline-
blocks) flow as if they are inline elements,
they are also using veritcal-align top. (I need a solution that will
work with an arbitrary number of blocks, the link
is just a typical example, they will be generated based from user
searches mapping to product matches)

I've tried to emulate the same effect in firefox, but it does not
support inline-block :(.

I tried float left, but since the blocks are varying heights, I can't
clear them all on a line.

Thank you

[dorayme]

In article
<11*********************@n76g2000hsh.googlegroups. com>,
"yb" <ba*********@yahoo.cawrote:

Why, yes.

clear:left;

I wish it were so easy :) I have to say my explanation of the problem
was terrible, please see the example here:

http://www.yasweb.com/ie_solution.html

When resizing the window, notice how the "blocks" (they are inline-
blocks) flow as if they are inline elements,
they are also using veritcal-align top. (I need a solution that will
work with an arbitrary number of blocks, the link
is just a typical example, they will be generated based from user
searches mapping to product matches)

I've tried to emulate the same effect in firefox, but it does not
support inline-block :(.

I tried float left, but since the blocks are varying heights, I can't
clear them all on a line.

Thank you

What are you really trying to do? Not in abstract but in fact.
There are ways to manage things but what is the content and
purpose of the page or section of the page? It might help to know.

(As it happens, iCab and Safari but not FF on a Mac are happy
with your code. Me, I am mightily puzzled by what you are
actually wanting this for.)

--
dorayme

[yb]

What are you really trying to do? Not in abstract but in fact.
There are ways to manage things but what is the content and
purpose of the page or section of the page? It might help to know.

(As it happens, iCab and Safari but not FF on a Mac are happy
with your code. Me, I am mightily puzzled by what you are
actually wanting this for.)

--
dorayme- Hide quoted text -

- Show quoted text -

I did not want to include all the details of the specific application
I am writing,
it would not serve any purpose

The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

in firefox, I want the same behavior that it exhibits in IE, and also
Safari, Opera, etc.

[Richard Formby]

yb wrote:

The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

in firefox, I want the same behavior that it exhibits in IE, and also
Safari, Opera, etc.

Google for: firefix inline-block

The first hit is relevant.

<quote>
inline-block is a CSS 2.1 value not supported by Firefox or IE. So, it
doesn't "work" in IE, it gets it wrong, you just like what it is doing.
</quote>

--
Richard.

[Richard Formby]

"Richard Formby wrote:

Google for: firefix inline-block

firefox of course...

[Rick Brandt]

yb wrote:

I did not want to include all the details of the specific application
I am writing,
it would not serve any purpose

The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

in firefox, I want the same behavior that it exhibits in IE, and also
Safari, Opera, etc.

This appears to do what you want when I tried it in FF. At least it seemed the
same as in IE.

..product {
float: left;
vertical-align : top;
width : 150px;
margin : 15px;
border : 1px dashed black;

}
..product a {
display : inline;
text-align : center;
text-decoration : none;
}

[dorayme]

In article
<11**********************@l75g2000hse.googlegroups .com>,
"yb" <ba*********@yahoo.cawrote:

What are you really trying to do? Not in abstract but in fact.
There are ways to manage things but what is the content and
purpose of the page or section of the page? It might help to know.

(As it happens, iCab and Safari but not FF on a Mac are happy
with your code. Me, I am mightily puzzled by what you are
actually wanting this for.)

--
dorayme- Hide quoted text -

- Show quoted text -

I did not want to include all the details of the specific application
I am writing,
it would not serve any purpose

The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

in firefox, I want the same behavior that it exhibits in IE, and also
Safari, Opera, etc.

Well, in that case, I will have to guess at what you are wanting
and meaning by "the same behaviour" because I am really quite
desperate to help you, just to make a difference on earth,
however little....

How about:

<http://members.optushome.com.au/droovies/test/yb.html>

This behaves in roughly the same way in all my browsers.

--
dorayme

[Richard Formby]

dorayme wrote

yb wrote

>The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

How about:

<http://members.optushome.com.au/droovies/test/yb.html>

I explored this *_extensively_* a few years ago. I wanted to do the same
sort of thing the OP wants, but with captioned pictures.

My effort was almost exactly the same as yours:
http://mulubinba.com.au/chapter7.html

I decided that it was impossible to make the boxes float evenly instead of
"stacking" to the right, without making them the same height, which can't be
done in this case. I eventually convinced myself that this behaviour was "by
design" and looked real neat. Nobody at the Ski Lodge has *ever* mentioned
the matter :-)

I recall the same thing being discussed here and elsewhere many times over
the years. No solution has been put forward IIRC.

OP: If you find out how to do what you want, please tell us.

--
Richard.

[Gus Richter]

Richard Formby wrote:

dorayme wrote

>yb wrote

>>The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

>How about:

<http://members.optushome.com.au/droovies/test/yb.html>

I explored this *_extensively_* a few years ago. I wanted to do the same
sort of thing the OP wants, but with captioned pictures.

My effort was almost exactly the same as yours:
http://mulubinba.com.au/chapter7.html

I decided that it was impossible to make the boxes float evenly instead of
"stacking" to the right, without making them the same height, which can't be
done in this case. I eventually convinced myself that this behaviour was "by
design" and looked real neat. Nobody at the Ski Lodge has *ever* mentioned
the matter :-)

I recall the same thing being discussed here and elsewhere many times over
the years. No solution has been put forward IIRC.

OP: If you find out how to do what you want, please tell us.

Adding min-height:150px or min-height:200px to .chapter div gives
what I believe you want, at least for Firefox (not checked on others).

--
Gus

[dorayme]

In article <t%******************@news-server.bigpond.net.au>,
"Richard Formby" <ne********@barefile.com.auwrote:

dorayme wrote

yb wrote

The core of the problem is exactly what I said... I am trying to
accomplish this:

http://www.yasweb.com/ie_solution.html

How about:

<http://members.optushome.com.au/droovies/test/yb.html>

I explored this *_extensively_* a few years ago. I wanted to do the same
sort of thing the OP wants, but with captioned pictures.

My effort was almost exactly the same as yours:
http://mulubinba.com.au/chapter7.html

I decided that it was impossible to make the boxes float evenly instead of
"stacking" to the right, without making them the same height, which can't be
done in this case. I eventually convinced myself that this behaviour was "by
design" and looked real neat. Nobody at the Ski Lodge has *ever* mentioned
the matter :-)

I recall the same thing being discussed here and elsewhere many times over
the years. No solution has been put forward IIRC.

I know exactly what you mean by "I eventually convinced myself
that ..." <g>

For galleries, there are various sophistications. One was
discussed on alt.html recently (how to do a thumbnails page might
even get to be a college degree!).

Lately, I "manage" things with floating divs by carefully
arranging the contents into categories, landscapes all the same
size first (their own wrapper div), portraits to follow (ditto a
div to wrap) and misc after that.

The thumbnails are best (time consuming though) prepared to be
same size (within their groups) and captions short (why bang on
and on, the enlargement page can have the essay!) to avoid all
float "snagging" and ugly unexpected blank space.

It just goes on and on how to do this stuff. My latest is to use
an adaptation from something Jonathan Little prefers. Here is
snippet from the css of a page of mine:

div.picCaption {margin: 1em; padding: 0; float: left; text-align:
center;}
div.picCaption a {display: block; font-size: 90%;}

and the html:

<div id="landscape">
<div class="picCaption">
<a href="makeup1.jpg"><img src="thumbs/makeup1.jpg"
alt="Backstage preparations"></a>backstage preparations 1
</div>

<div class="picCaption">
<a href="makeup2.jpg" etc
</div>

etc

</div>

As for size specs for the thumbs, I tried putting them in the css
and this was so neat, you know:

img {width: 150px; height:200px;}

to save repeating in the html itself. But I think I noticed that
Win IE took no notice and sized them on the fly as if there were
no size specs and so maybe one needs to put them in the html if
one wants a big page to load gracefully with space reserved.

Sometimes I leave out the classes and pick them out in the css by

div.landscape div {...}

to further reduce so much stuff in the html. btw, I guess.

--
dorayme

[yb]

Thanks for all the replies.
I don't have a solution to the problem, but an alternative.

I will keep the containing blocks a fixed height, and use the :hover
pseudo-class
When the user hovers over the text, it will position the text
absolutely and change the maximum height for the text container.

This way, the text will expand when they hover over, and shrink when
hover state is lost. This is also relying on absolute positioned item
to stay in "normal" position, which probably isn't the best practice
since CSS spec. doesn't require it. But, it appears to work in
firefox.