lining up blocks with display:inline;

**Haines Brown** · Mar 26 '06, 01:05 AM

Re: lining up blocks with display:inline;

Sorry to follow up on my own question. After another half day browsing
on line, I came to realize I was suffering from a classic problem whch
is called the "containing floats" problem. It is that a floated block
is in effect removed from the containing block and so does not
contribute to its height. As a result, my horizontal row ofblocks
fell below the bottom margin of the containing block, the height of
which was governed by its text content.

I came across a hack that works, but would appreciate any criticism:

I followed the horizontal row of floated-left blocks with a <hr /> and
defined its style as:

hr {
display: block;
clear: left;
visibility: hidden;
margin: -0.1em 0;}

--

Haines Brown
KB1GRM
ET1(SS) U.S.S. Irex 482

**Daniel Déchelotte** · Mar 26 '06, 08:15 AM

Re: lining up blocks with display:inline;

Haines Brown a écrit :
[color=blue]
> [...] I came to realize I was suffering from a classic problem whch
> is called the "containing floats" problem. It is that a floated block
> is in effect removed from the containing block and so does not
> contribute to its height. As a result, my horizontal row ofblocks
> fell below the bottom margin of the containing block, the height of
> which was governed by its text content.[/color]

True.
[color=blue]
> I came across a hack that works, but would appreciate any criticism:[/color]

I would rather recommend
http://www.positioniseverything.net/easyclearing.html.

(Please quote what you are replying to)

Haines Brown a écrit :
[color=blue]
> #aa, #bb, #cc {width: 140px; padding-top: 3px; display: inline;}
>
> <div class="bouton" id="aa">
> <a href="../../index.html" title="">
> <span class="a"><span class="b"><span class="c">
> Foo A
> </span></span></span>
> </a>
> </div>[/color]

Please upload a test case, with the minimal markup that exhibits the
problem and real data to understand what you are trying to achieve, and
post that URL. (as a side note, widths expressed in pixels are usually
a bad choice for elements that contain text).
[color=blue]
> With display:inline they still stack
> vertically and now with a width equal to that of the parent
> container. What is going on?[/color]

What parent container? Any other CSS rule intervening?

Anyways, the width property is ignored for inline elements. "display:
inline-block" ought to be the code of choice for the effect you are after,
but "variable" browser support makes it indeed preferable to use floated
DIVs, as you did.

--
Daniel Déchelotte

free.fr

http://yo.dan.free.fr/

**Haines Brown** · Mar 26 '06, 11:55 AM

Re: lining up blocks with display:inline;

Daniel Dichelotte <maitre_yodan@f r.club-internet.invali d> writes:
[color=blue]
> Haines Brown a icrit :
>[color=green]
>> [...] I came to realize I was suffering from a classic problem whch
>> is called the "containing floats" problem. It is that a floated block
>> is in effect removed from the containing block and so does not
>> contribute to its height. As a result, my horizontal row ofblocks
>> fell below the bottom margin of the containing block, the height of
>> which was governed by its text content.[/color]
>
> True.
>[color=green]
>> I came across a hack that works, but would appreciate any criticism:[/color]
>
> I would rather recommend
> http://www.positioniseverything.net/easyclearing.html.[/color]

Thank you for the URL, which was much better than what I was
trying to use. I had tried this pseudo element approach and failed,
but perhaps with this explanation of the containing floats problem it
will go better.
[color=blue]
> Haines Brown a icrit :
>[color=green]
>> #aa, #bb, #cc {width: 140px; padding-top: 3px; display: inline;}
>>
>> <div class="bouton" id="aa">
>> <a href="../../index.html" title="">
>> <span class="a"><span class="b"><span class="c">
>> Foo A
>> </span></span></span>
>> </a>
>> </div>[/color]
>
> Please upload a test case, with the minimal markup that exhibits the
> problem and real data to understand what you are trying to achieve,
> and post that URL.[/color]

I am in the process of updating an old 1999 HTML document with
CSS. I'm not sure of your implied question, but all the SPANs serve to
decorate the button. This will make it clear:

http://www.hartford-hwp.com/sandbox/docs/history/history01.html

Since you asked to see the document, allow me to raise an OT
question. You will note that I have the text in a div of defined
width, which is not conventional practice. The only reason is that I
know the readability of text is reduced if lines are too long, and so
I limited their length. However, I need to change width to max-width.

--

Haines Brown
KB1GRM
ET1(SS) U.S.S. Irex 482

**Alan J. Flavell** · Mar 26 '06, 12:15 PM

Re: lining up blocks with display:inline;

On Sun, 26 Mar 2006, Daniel Déchelotte wrote:
[color=blue]
> I would rather recommend
> http://www.positioniseverything.net/easyclearing.html.[/color]

How about http://www.quirksmode.org/css/clearing.html ?

**Haines Brown** · Mar 26 '06, 01:25 PM

Re: lining up blocks with display:inline;

"Alan J. Flavell" <flavell@physic s.gla.ac.uk> writes:
[color=blue]
> On Sun, 26 Mar 2006, Daniel Dichelotte wrote:
>[color=green]
>> I would rather recommend
>> http://www.positioniseverything.net/easyclearing.html.[/color]
>
> How about http://www.quirksmode.org/css/clearing.html ?[/color]

A very simple solution! Thank you. Works fine on galeon and firefox,
but I worry about other browsers (am in no position to check).

--

Haines Brown
KB1GRM
ET1(SS) U.S.S. Irex 482

lining up blocks with display:inline;

lining up blocks with display:inline;

Comment

Comment

Comment

Comment

Comment