473,246 Members | 1,825 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 software developers and data experts.

lining up blocks with display:inline;

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
5 2150
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
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
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
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
"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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: e n | c k m a | last post by:
Anyone know how to keep the list-style-image visible when using display: inline for a horizontal list? Also, how to possibly have the text a little higher than the list-style-image? I've...
4
by: Axel Dahmen | last post by:
Hi, current browsers don't support "display: inline-block;" and "display: inline-table;", resp. Thus I'm using "float: left;" to achieve a similar effect. Problem is that if a row of elements...
23
by: Mat | last post by:
<div id="container"> <div id="main"> <div id="header"> <p class="Address">123 Fake Street, </p> <p class="City">Crazy City, </p> <p class="Province">Ontario </p> <p class="PostalCode">H0H...
4
by: txican | last post by:
the HTML is: ---------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>foo</title>...
5
by: CES | last post by:
All, I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly... Basically I have a row that has a fixed width of 900px. Within the row their is...
3
by: Jannette | last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying...
11
by: totalstranger | last post by:
I have a check box with let's say 20 elements. I would like to have it align as 4 columns, 5 rows. Without using a table and using understandable CSS is there any way to make the check boxes align...
2
by: Steve Richter | last post by:
I would like to use display:inline and other CSS attributes to build an entry form. Where the heading to the left of the text box is always a set width. It is not working so I am experimenting...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.