By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,222 Members | 1,391 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,222 IT Pros & Developers. It's quick & easy.

clearing floats to content edge

P: n/a
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

Mar 13 '07 #1
Share this Question
Share on Google+
13 Replies


P: n/a
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).
Mar 13 '07 #2

P: n/a
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
Mar 13 '07 #3

P: n/a
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

Mar 13 '07 #4

P: n/a
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
Mar 14 '07 #5

P: n/a
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.

Mar 14 '07 #6

P: n/a
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.
Mar 14 '07 #7

P: n/a
"Richard Formby wrote:
Google for: firefix inline-block
firefox of course...
Mar 14 '07 #8

P: n/a
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;
}
Mar 14 '07 #9

P: n/a
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
Mar 14 '07 #10

P: n/a
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.
Mar 14 '07 #11

P: n/a
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
Mar 14 '07 #12

P: n/a
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
Mar 14 '07 #13

P: n/a
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.

Mar 16 '07 #14

This discussion thread is closed

Replies have been disabled for this discussion.