Re: [css-d] Floating boxes with variable heights

[Markus Ernst]

Am 28.07.2012 13:58 schrieb Georg:

On 28.07.2012 13:29, Markus Ernst wrote:

http://www.rapid.ch/de/rapid-einachsgeraete/prospekte.html

The headings here match the width of 3 image elements plus borders and
the 2 margins between them. With space characters added to the
margins, the width cannot be caluclated reliably anymore.

Maybe you know a workaround for this, too?


Sort of - in a round-about way. The "auto added" space is approx .5em
either side of an inline-block, so by subtracting 1em from margin at
front-side (often means negative front-margin) and offsetting the blocks
(position: relative) to line up 1em further in - where they should show
up, you can achieve pretty pixel-accurate margin calculations. Test and
tweak subtracted value and offset till line-up is as stable as can be,
and use backside margins to create wanted space.

In most cases I simply set margins in em, .5em less that I want the
blocks spaced. But since em is not always the right unit to make sure
all blocks line up as intended in a more pixel controlled design, the
"round-about" is how I do it while waiting for the calc() property to be
supported across browser-land.


Thank you Georg! I now added the desired visible gap in px as via 
padding, and set a right margin of -0.25em (as you suggested somewhere 
else in this thread). This works as intended in most modern browsers 
(including page or text zoom), with some minor differences in some zoom 
factors in some browsers.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Boray ERIS]

On Thu, Jul 26, 2012 at 12:58 PM, Markus Ernst  wrote:

> Hi
>
> Something that I asked myself for years already: If you have some floating
> boxes, you may want them to fill the available width and then continue at a
> next row. Now, if these boxes do not have a fixed height, this will result
> in rows that do not start at the left edge, as this example illustrates:
> http://www.markusernst.ch/**stuff_for_the_world/test-**floating-boxes.html
>
> Vary the window width to see how new rows are started according to the
> heights of the boxes in the upper row.
>
> The only CSS way I have been able to work around this so far (without
> scripting) is defining a fixed box height, which is not a good solution for
> multiple reasons. I would like the boxes to be rendered as if they were
> wrapped in table rows, each row having the height necessary for the tallest
> box in the row. But of course I cannot actually wrap them (or use table-*
> styles), because the number of boxes per row varies with the width of the
> viewport.
>
> Is there a good solution for this problem?
>
> Thanks for your comments!
> Markus
>

Hi Markus,

Here is my solution with jQuery. My script searches floating divs and finds
highest div and makes other divs the same height. Please review it.
http://demo.pidizayn.com/floating-boxes-jquery-height-fix.html

-- 
Boray Eris
www.pidizayn.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 29.07.2012 11:41, Georg wrote:

On 29.07.2012 07:29, David Hucklesby wrote:

Now you made me double-check. :)


Always a good thing ... that I don't do as often as I should these 
days ;-)


To make my solution work we have to determine the exact width of the 
auto-added white-space. As browsers do not add more than 1 space no 
matter what - unless we tell them to, we then only have to make sure 
elements are not packed together "end to end" in markup.


Double checking indicates that the added white-space is pretty close to 
.25em, so this test case...

http://www.gunlaug.com/contents/test/test-floating-boxes-mc0.html
...with relevant CSS being...
.floating {
   display: inline-block;
   vertical-align: top;
width:140px;
margin:1em 0 0 -.25em;
border:1px dashed #ccc;
position: relative;
left: .25em;
}
...should ideally result in zero space and no overlapping.

To produce the _desired_ spacing in a layout, the right margin on 
"floating" can be set to whatever value using whatever unit that goes 
with the layout. As long as a layout is not so tight that it causes 
"early drop" because of the width of the last right margin on a line, a 
nice line-up can be achieved.


IE9, IE8, Safari, Chrome & Opera seem to agree that the amount of 
auto-added white-space is around .25em. Have done some font resizing in 
IE9 and Chrome, and can't see any problems with that value for the 
testcase at hand.


IE7 and IE6 have not gotten their "fixes" in my testcase, so no idea 
what those obsolete versions will do.


Firefox 14.01 is "over-precise" as always - causing the occasional 
overlap, so the exact amount of auto-added white-space - as Gecko 
calculates it - may be slightly less than .25em. More testing...


..[test].[test]...

My conclusion is that .25em is as close as we can get to cover the 
various round-up/round-down points across browser-land. Going lower 
breaks it by a px in many browsers, and going higher breaks it slightly 
more (often) in Gecko. Gecko seems to get it right with .24em.


regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Philippe Wittenbergh]

Le 29 juil. 2012 à 15:01, Philippe Wittenbergh a écrit :

> Gecko and WebKit treat 'font-size: 0' in a special way - they both respect it 
> no matter what, just because too many webpages use this to hide text under 
> images or something similar, I forgot what the exact argument was when Gecko 
> started this, I'd need to check bugzilla to find the bug that implemented 
> that exception.

For the curious, this was first implemented  in Gecko in bug 401046.
https://bugzilla.mozilla.org/show_bug.cgi?id=401046

Webkit followed at a later date.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 29.07.2012 07:29, David Hucklesby wrote:

Now you made me double-check. :)


Always a good thing ... that I don't do as often as I should these days ;-)

In Webkit, I can only find a minimum font size setting. (Safari; 
Chrome)??


Five-step font-size selection under "Settings" --> "Show advanced 
settings".  Can't see that it will in any way disturb your solution.



In IE I only have 6,7, and 8 available now. These have "Accessibility"
options as you describe. Only the "Ignore font sizes set on webpages" 
option

causes this method to fail completely.


Same in IE9. That IE's "accessibility options" break more than 
accessibility is well known. They should upgrade the entire 
accessibility thing, as it has been like that for longer than IE6.



So, yes. Not perfect. But I can only find the one edge case that can't be
fixed. (IE's "Ignore font sizes...") Can you please point to cases I 
missed?


As Philippe mentioned: Opera. No special handling of 'font-size: 0' 
there, and all Opera downloads at my end (on windows) have come with 
minimum font size set to 9px.


Think that pretty much covers it. Your solution will work for the large 
majority of end-users. Whether or not it can be implemented depends on 
ability to tailor markup for it, as Philippe told us is not always the case.


regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Philippe Wittenbergh]

Le 29 juil. 2012 à 14:29, David Hucklesby a écrit :

> In Webkit, I can only find a minimum font size setting. (Safari; Chrome)??
> 
> In Firefox, there's an additional "Allow pages to choose their own fonts"
> checkbox. Normally this is set, so I tried toggling it. No problem.

Gecko and WebKit treat 'font-size: 0' in a special way - they both respect it 
no matter what, just because too many webpages use this to hide text under 
images or something similar, I forgot what the exact argument was when Gecko 
started this, I'd need to check bugzilla to find the bug that implemented that 
exception.

My test case does fail in Opera (tested: 12 desktop). There remains a gap 
between the cells of the grid. And i haven't checked any 'mobile' browser.

My testcase looks like this, with font-size:0 set on .grid:

cell
…


> 
> ...
> 
> So, yes. Not perfect. But I can only find the one edge case that can't be
> fixed. (IE's "Ignore font sizes...") Can you please point to cases I missed?

One other issue I can point out: you can't use that 'container' for anything 
that requires size/ based on 'em' or 'ex': e.g. margins, padding, 
border will all compute to 0. You need a dedicated container just to set that 
font-size. On a project I've been working on and off recently, I don't have 
that luxury, and I don't have any control over the mark-up.

Assuming my example above:
.grid {
font-size: 0;
margin: 1em; max-width: 50em, border: .2em solid, border-radius: .6em
/* and more property/value pairs */
}

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[David Hucklesby]

On 7/28/12 9:45 AM, Georg wrote:

On 28.07.2012 17:48, David Hucklesby wrote:

There's another alternative that lets you retain the white-space in the
HTML, which is to use a font-size of zero on some container, and
restore the font-size on the paragraphs with a value other than EMs or
percents.


Have you checked how white-space in such an arrangement is handled in
browsers with 'minimum font size' set, 'font size ignored' or font-size
overridden ?


[...]

Now you made me double-check. :)

In Webkit, I can only find a minimum font size setting. (Safari; Chrome)??

In Firefox, there's an additional "Allow pages to choose their own fonts"
checkbox. Normally this is set, so I tried toggling it. No problem.

In IE I only have 6,7, and 8 available now. These have "Accessibility"
options as you describe. Only the "Ignore font sizes set on webpages" option
causes this method to fail completely.

In 6 and 7, there is an extra one pixel gap. Easily fixed with a -1px 
margin-right. { *margin-right: -1px; }


All other tests with minimum font size set, or other text size settings work
fine in all modern browsers. (Firefox tested back to version 3.0.)

So, yes. Not perfect. But I can only find the one edge case that can't be
fixed. (IE's "Ignore font sizes...") Can you please point to cases I missed?

(Thanks for challenging my assumptions.)
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 28.07.2012 17:48, David Hucklesby wrote:

There's another alternative that lets you retain the white-space in the
HTML, which is to use a font-size of zero on some container, and 
restore the

font-size on the paragraphs with a value other than EMs or percents.


Have you checked how white-space in such an arrangement is handled in 
browsers with 'minimum font size' set, 'font size ignored' or font-size 
overridden ?


The results from using such an arrangement used to be "pretty flaky" 
across browser-land in years past. I have only checked that all new 
browsers have such options, not how they handle that particular case.


regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Philip TAYLOR]

David Hucklesby wrote:


You are on the right track when you talk about a container.

There's another alternative that lets you retain the white-space in the
HTML, which is to use a font-size of zero on some container, and restore
the
font-size on the paragraphs with a value other than EMs or percents.
Keywords, REMs, or pixels will work.

Suppose you wrap the "floating" DIVs in a DIV.container element. (Yes, very
imaginative, I know:) Here I use the keyword "medium". YMMV -

.container { font-size: 0; }
.container p { font-size: medium; }


It definitely has possibilities; now if only there were a property (say)
"transparent-to" that affected interitane : if could, if
"transparent-to" were appropriate specified, write :

.container {transparent-to: font-size; font-size: 0}

and this would then allow inner elements to inherit their
font size directly from the element just outside the container
element.

Philip Taylor
--
MIL-05991/237/2012-B : Any loss of data or other computer malfunction 
resulting directly or indirectly from the use of Linux will be regarded 
as a self-inflicted injury and treated accordingly.  Users of Mac OS/X 
will be assumed to be insane.  You have been warned ...

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[David Hucklesby]

On 7/28/12 5:10 AM, Philip TAYLOR wrote:



Philippe Wittenbergh wrote:>


Le 28 juil. 2012 à 20:29, Markus Ernst a écrit :


The headings here match the width of 3 image elements plus borders
and the 2 margins between them. With space characters added to the
margins, the width cannot be caluclated reliably anymore.



Write your source code without any white-space between the blocks ?


That is what I am frequently forced to do, but it is a horrible hack; one
should be able to write HTML in such a way as to make the semantics
clear, not forced to run everything on to one line simply because there
is not an appropriate container property that can be used to indicate
"end of line to be ignored within the scope of this container".

Philip Taylor


You are on the right track when you talk about a container.

There's another alternative that lets you retain the white-space in the
HTML, which is to use a font-size of zero on some container, and restore the
font-size on the paragraphs with a value other than EMs or percents.
Keywords, REMs, or pixels will work.

Suppose you wrap the "floating" DIVs in a DIV.container element. (Yes, very
imaginative, I know:) Here I use the keyword "medium". YMMV -

.container { font-size: 0; }
.container p { font-size: medium; }

--
Cordially,
David

.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 28.07.2012 13:58, Georg wrote:
Sort of - in a round-about way. The "auto added" space is approx .5em 
either side of an inline-block, so by subtracting 1em from margin at 
front-side (often means negative front-margin) and offsetting the 
blocks (position: relative) to line up 1em further in - where they 
should show up, you can achieve pretty pixel-accurate margin calculations.


Wrong "added (white) space" value ... too many years since I bothered 
with this stuff :-)


Demo with better values here...
http://www.gunlaug.com/contents/test/test-floating-boxes-mc.html

regards
Georg




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Philip TAYLOR]

Philippe Wittenbergh wrote:>


Le 28 juil. 2012 à 20:29, Markus Ernst a écrit :


The headings here match the width of 3 image elements plus borders
and the 2 margins between them. With space characters added to the
margins, the width cannot be caluclated reliably anymore.



Write your source code without any white-space between the blocks ?


That is what I am frequently forced to do, but it is a horrible
hack; one should be able to write HTML in such a way as to
make the semantics clear, not forced to run everything on to
one line simply because there is not an appropriate container
property that can be used to indicate "end of line to be ignored
within the scope of this container".

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Philippe Wittenbergh]

Le 28 juil. 2012 à 20:29, Markus Ernst a écrit :

> The headings here match the width of 3 image elements plus borders and the 2 
> margins between them. With space characters added to the margins, the width 
> cannot be caluclated reliably anymore.

Write your source code without any white-space between the blocks ?

Or dream about the CSS3 ‘text-space-collapse’ property ? (hmm, hold on, it is 
already in CSS 4…)
http://dev.w3.org/csswg/css4-text/#white-space-collapsing

In  the more real world, fudging with margins between blocks, or playing with 
the word-spacing property can help.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 28.07.2012 13:29, Markus Ernst wrote:

http://www.rapid.ch/de/rapid-einachsgeraete/prospekte.html

The headings here match the width of 3 image elements plus borders and 
the 2 margins between them. With space characters added to the 
margins, the width cannot be caluclated reliably anymore.


Maybe you know a workaround for this, too?


Sort of - in a round-about way. The "auto added" space is approx .5em 
either side of an inline-block, so by subtracting 1em from margin at 
front-side (often means negative front-margin) and offsetting the blocks 
(position: relative) to line up 1em further in - where they should show 
up, you can achieve pretty pixel-accurate margin calculations. Test and 
tweak subtracted value and offset till line-up is as stable as can be, 
and use backside margins to create wanted space.


In most cases I simply set margins in em, .5em less that I want the 
blocks spaced. But since em is not always the right unit to make sure 
all blocks line up as intended in a more pixel controlled design, the 
"round-about" is how I do it while waiting for the calc() property to be 
supported across browser-land.


FYI: I have added more line-up variants for the inline-block method 
itself - a total of 6 variants listed here...


http://www.gunlaug.com/contents/test/

Have not included the margin tweaking you ask for yet, but may later.

regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Markus Ernst]

Am 27.07.2012 01:43 schrieb Georg:

On 27.07.2012 00:46, Georg wrote:

On 27.07.2012 00:18, Boray ERIS wrote:

Is this a joke?


Nope. It's CSS!


...an if you don't bother to test this old float-alternative at your
end, here are a few examples.

http://www.gunlaug.com/contents/test/test-floating-boxes.html
http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
http://www.gunlaug.com/contents/test/test-floating-boxes-r.html


Thank you very much Georg, this is great news! I don't think correcting 
for IE7 and even IE6 is a great deal, giving them some extra CSS via 
conditionnal comments.


Now there is one thing that I noticed: With inline-block, a space 
character remains between the elements and is added to the margins. This 
can be a problem in case you try to calculate the total width of a 
number of the "floated" elements, as I did in my real case (inline-block 
not yet applied, as this is publicly online):

http://www.rapid.ch/de/rapid-einachsgeraete/prospekte.html

The headings here match the width of 3 image elements plus borders and 
the 2 margins between them. With space characters added to the margins, 
the width cannot be caluclated reliably anymore.


Maybe you know a workaround for this, too?

Thanks for your help!
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 27.07.2012 14:09, Peter H. wrote:

I wonder how far back inline-block is supported. When you say 'obsolete 
browsers', are you referring to IE6 and IE7?


IE6/7 need some fixes for buggy support, but no real problems. Gecko was 
late in adding support, but can't imagine that being a problem now.
The reason I mentioned "obsolete browsers" is that I have bad memories 
about the cross-browser mess we had until only a few years ago, and now 
I don't care to check in older browser versions unless I get paid to do 
so :-)


Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Peter H.]

thanks Georg, that's very handy. Peter


> -
> El 27/07/2012, a las 17:27, Georg escribió:
> 
> an alternative to equal height floats, and inline-block are very often the 
> best 
> 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 27.07.2012 14:09, Peter H. wrote:

On the other hand, if 'float-' is a mistype (and doesn't exist as a 
declaration) then there is no float declaration and the whole thing depends on 
display: inline-block;

Is that right?


The hyphen is my "quick and dirty" way of disabling a declaration 
without deleting it or commenting it out. Makes life so much easier to 
have the CSS validator find the disabled declarations, than to keep 
track of comments or deleted declarations. I have and make frequent use 
of a few such tricks while debugging CSS, to speed up the process. 
Should not have left it in since it can cause confusion to others.


So, correct, the whole thing rely on 'display: inline-block', and the 
crippled float declaration can/should be deleted and forgotten. You 
wanted an alternative to equal height floats, and inline-block are very 
often the best alternative.


regards
Georg


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Vladimir]

yah it's almost like you don't need the float: left

On Fri, Jul 27, 2012 at 8:09 AM, Peter H.  wrote:

> Georg, I'm intrigued by your example and have wanted that behaviour
> several times in the past and couldn't figure a way to achieve it without
> fixed height divs.
>
> But from your test page there's a bit of css that I don't understand:
>
> .floating {
> float-:left;
> width:140px;
> margin:1em .5em 0 0;
> border:1px dashed #ccc;
> display: inline-block;
> vertical-align: top;
> }
>
> In your float declaration, if one removes the hyphen after the word
> 'float' the page ceases to behave in the desired way.
>
> On the other hand, if 'float-' is a mistype (and doesn't exist as a
> declaration) then there is no float declaration and the whole thing depends
> on display: inline-block;
>
> Is that right?
>
> I wonder how far back inline-block is supported. When you say 'obsolete
> browsers', are you referring to IE6 and IE7?
>
> Peter
>
>
>
> > El 27/07/2012, a las 01:43, Georg escribió:
> >
> > ...an if you don't bother to test this old float-alternative at your
> end, here are a few examples.
> >
> > http://www.gunlaug.com/contents/test/test-floating-boxes.html
> > http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
> > http://www.gunlaug.com/contents/test/test-floating-boxes-r.html
> >
> > I can't be bothered to debug obsolete browsers, so others will have to
> include the old fixes for those - if they like.
> >
> > regards
> >Georg
> >
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
*Thanks,
Vladimir Fernandes*
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Peter H.]

Georg, I'm intrigued by your example and have wanted that behaviour several 
times in the past and couldn't figure a way to achieve it without fixed height 
divs.

But from your test page there's a bit of css that I don't understand:

.floating {
float-:left;
width:140px;
margin:1em .5em 0 0;
border:1px dashed #ccc;
display: inline-block;
vertical-align: top;
}

In your float declaration, if one removes the hyphen after the word 'float' the 
page ceases to behave in the desired way. 

On the other hand, if 'float-' is a mistype (and doesn't exist as a 
declaration) then there is no float declaration and the whole thing depends on 
display: inline-block;

Is that right?

I wonder how far back inline-block is supported. When you say 'obsolete 
browsers', are you referring to IE6 and IE7?

Peter



> El 27/07/2012, a las 01:43, Georg escribió:
> 
> ...an if you don't bother to test this old float-alternative at your end, 
> here are a few examples.
> 
> http://www.gunlaug.com/contents/test/test-floating-boxes.html
> http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
> http://www.gunlaug.com/contents/test/test-floating-boxes-r.html
> 
> I can't be bothered to debug obsolete browsers, so others will have to 
> include the old fixes for those - if they like.
> 
> regards
>Georg
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 27.07.2012 01:52, Tedd Sperling wrote:
You are irritatingly brilliant. :-) 


Naa, I refreshed my mind on old methods on...
http://www.brunildo.org/test/index.html
...a few weeks ago. It's all there, just different.

regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Tedd Sperling]

On Jul 26, 2012, at 7:43 PM, Georg  wrote:
> ...an if you don't bother to test this old float-alternative at your end, 
> here are a few examples.
> 
> http://www.gunlaug.com/contents/test/test-floating-boxes.html
> http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
> http://www.gunlaug.com/contents/test/test-floating-boxes-r.html
> 
> I can't be bothered to debug obsolete browsers, so others will have to 
> include the old fixes for those - if they like.
> 
> regards
>Georg

You are irritatingly brilliant. :-)

Cheers,

tedd

_
t...@sperling.com
http://sperling.com


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 27.07.2012 00:46, Georg wrote:

On 27.07.2012 00:18, Boray ERIS wrote:
Is this a joke? 


Nope. It's CSS!


...an if you don't bother to test this old float-alternative at your 
end, here are a few examples.


http://www.gunlaug.com/contents/test/test-floating-boxes.html
http://www.gunlaug.com/contents/test/test-floating-boxes-c.html
http://www.gunlaug.com/contents/test/test-floating-boxes-r.html

I can't be bothered to debug obsolete browsers, so others will have to 
include the old fixes for those - if they like.


regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 27.07.2012 00:18, Boray ERIS wrote:
Is this a joke? 


Nope. It's CSS!

Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Boray ERIS]

On Thu, Jul 26, 2012 at 11:43 PM, Georg  wrote:

> On 26.07.2012 11:58, Markus Ernst wrote:
>
>> Hi
>>
>> Something that I asked myself for years already: If you have some
>> floating boxes, you may want them to fill the available width and then
>> continue at a next row. Now, if these boxes do not have a fixed height,
>> this will result in rows that do not start at the left edge, as this
>> example illustrates:
>> http://www.markusernst.ch/**stuff_for_the_world/test-**
>> floating-boxes.html
>>
>
> Try...
>
> .floating {
> display: inline-block;
> vertical-align: top;
> width:140px;
> margin:1em 1em 0 0;
> border:1px dashed #ccc;
> }
>
> ...and see if you're happy with the result.
>
> regards
> Georg
>
>
>
> __**__**__
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/**mailman/listinfo/css-d
> List wiki/FAQ -- 
> http://css-discuss.incutio.**com/
> List policies -- 
> http://css-discuss.org/**policies.html
> Supported by evolt.org -- 
> http://www.evolt.org/help_**support_evolt/
>

Is this a joke?

-- 
Boray Eris
www.pidizayn.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating boxes with variable heights

[Georg]

On 26.07.2012 11:58, Markus Ernst wrote:

Hi

Something that I asked myself for years already: If you have some 
floating boxes, you may want them to fill the available width and then 
continue at a next row. Now, if these boxes do not have a fixed 
height, this will result in rows that do not start at the left edge, 
as this example illustrates:

http://www.markusernst.ch/stuff_for_the_world/test-floating-boxes.html


Try...

.floating {
display: inline-block;
vertical-align: top;
width:140px;
margin:1em 1em 0 0;
border:1px dashed #ccc;
}

...and see if you're happy with the result.

regards
Georg


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Floating boxes with variable heights

[Markus Ernst]

Hi

Something that I asked myself for years already: If you have some 
floating boxes, you may want them to fill the available width and then 
continue at a next row. Now, if these boxes do not have a fixed height, 
this will result in rows that do not start at the left edge, as this 
example illustrates:

http://www.markusernst.ch/stuff_for_the_world/test-floating-boxes.html

Vary the window width to see how new rows are started according to the 
heights of the boxes in the upper row.


The only CSS way I have been able to work around this so far (without 
scripting) is defining a fixed box height, which is not a good solution 
for multiple reasons. I would like the boxes to be rendered as if they 
were wrapped in table rows, each row having the height necessary for the 
tallest box in the row. But of course I cannot actually wrap them (or 
use table-* styles), because the number of boxes per row varies with the 
width of the viewport.


Is there a good solution for this problem?

Thanks for your comments!
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/