lining up blocks with display:inline;

Haines Brown

A much discussed issue, but I'm unable to get results. Using galeon as
browser.

I have a div, the bottem border of which is solid and serves as a base
line. My aim is to line up next to each other on the left three block
elements ("bouton") on top of the base line.

Here's what I tried:

#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>

<div class="bouton" id="bb">
<a href="../history.html" title="">
<span class="a"><span class="b"><span class="c">
Foo B
</span></span></span>
</a>
</div>

<div class="bouton" id="cc">
<a href="history03.html" title="">
<span class="a"><span class="b"><span class="c">
Foo C
</span></span></span>
</a>
</div>

Without display:inline, the blocks appear correctly except that they
are stacked vertically. With display:inline they still stack
vertically and now with a width equal to that of the parent
container. What is going on? I can use float:left on the three blocks,
which then line up nicely, but below the parent container base line.

--

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

Mar 25 '06 #1

Haines Brown

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

Mar 26 '06 #2

Daniel Déchelotte

Haines Brown a écrit :

[...] 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.
True.
I came across a hack that works, but would appreciate any criticism:
I would rather recommend
http://www.positioniseverything.net/easyclearing.html.

(Please quote what you are replying to)

Haines Brown a écrit :
#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>
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).
With display:inline they still stack
vertically and now with a width equal to that of the parent
container. What is going on?

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
http://yo.dan.free.fr/

Mar 26 '06 #3

Haines Brown

Daniel Dichelotte <ma**********@fr.club-internet.invalid> writes:

Haines Brown a icrit :

[...] 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.
True.

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

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

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.
Haines Brown a icrit :

#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>

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.

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/...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

Mar 26 '06 #4

Alan J. Flavell

On Sun, 26 Mar 2006, Daniel Déchelotte wrote:

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

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

Mar 26 '06 #5

Haines Brown

"Alan J. Flavell" <fl*****@physics.gla.ac.uk> writes:

On Sun, 26 Mar 2006, Daniel Dichelotte wrote:

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

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

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

Mar 26 '06 #6