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

Float versus inline

P: n/a
To produce a side-by-side three-column layout with a uniform, bordered top
and bottom , I used the same HTML with two sets of styles. The two versions
are at

http://mywebpages.comcast.net/hmessi...debyside1.html
http://mywebpages.comcast.net/hmessi...debyside2.html

The <p> with the "clear" class is there for the style version that uses
floats, to force the outer DIV to end below the columns. (Otherwise, its
height is nil.)

The two sets of styles produce identical displays in IE 6, except that with
the second version, the main DIV starts a little bit further down.

In theoretical terms, are both versions reasonable and acceptable? In terms
of practicality, are both versions equally likely to work correctly in other
existing browsers, or is one more portable than the other? Any philosophical
problems with the use of the <p class="clear"> this way?

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:bs************@ID-114100.news.uni-berlin.de...
To produce a side-by-side three-column layout with a uniform, bordered top
and bottom , I used the same HTML with two sets of styles. The two versions are at

http://mywebpages.comcast.net/hmessi...debyside1.html
http://mywebpages.comcast.net/hmessi...debyside2.html

The <p> with the "clear" class is there for the style version that uses
floats, to force the outer DIV to end below the columns. (Otherwise, its
height is nil.)

The two sets of styles produce identical displays in IE 6, except that with the second version, the main DIV starts a little bit further down.

In theoretical terms, are both versions reasonable and acceptable? In terms of practicality, are both versions equally likely to work correctly in other existing browsers, or is one more portable than the other? Any philosophical problems with the use of the <p class="clear"> this way?


I checked out part of the answer myself: Version 1 doesn't work correctly in
Netscape 7 at all. Version 2 works EXCEPT that the top and bottom borders
are BOTH above the columns--which means the <p class="clear"> technique
didn't work. Is it supposed to? Is it that IE is right in this case and
Netscape is wrong? By the way, Firebird gave displays identical to those in
Netscape 7. Opera, meanwhile, doesn't seem to want to open right now on my
computer. It's giving me a fatal error.

The bottom line is: I'm working out on my own techniques for getting a
multi-column layout without tables!

Jul 20 '05 #2

P: n/a
Harlan Messinger wrote:

http://mywebpages.comcast.net/hmessi...debyside1.html
http://mywebpages.comcast.net/hmessi...debyside2.html

The <p> with the "clear" class is there for the style version that
uses floats, to force the outer DIV to end below the columns.
(Otherwise, its height is nil.) Any philosophical problems with the
use of the <p class="clear"> this way?


It's not a paragraph, is it?

<div class="clear"></div>

Also, I'd not use "clear" as a class, since that's a css property.
But that's my preference.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #3

P: n/a

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:sXEIb.22839$xX.83518@attbi_s02...
Harlan Messinger wrote:

http://mywebpages.comcast.net/hmessi...debyside1.html
http://mywebpages.comcast.net/hmessi...debyside2.html

The <p> with the "clear" class is there for the style version that
uses floats, to force the outer DIV to end below the columns.
(Otherwise, its height is nil.) Any philosophical problems with the
use of the <p class="clear"> this way?
It's not a paragraph, is it?

<div class="clear"></div>


Well, OK. But is it a DIV? It's really just a hack; I could have used any
block tag. What would be *nice* would be if, just as you can indicate than
an element should clear the floaters it *follows*, you could indicate that
the *bottom* of an element should clear the floaters it *contains*.

Also, I'd not use "clear" as a class, since that's a css property.
But that's my preference.


Seems reasonable.

Jul 20 '05 #4

P: n/a
Harlan Messinger wrote:
Brian wrote
Harlan Messinger wrote:
Any philosophical problems with the use of the <p
class="clear"> this way?
It's not a paragraph, is it?

<div class="clear"></div>


Well, OK. But is it a DIV?


DIV is semantically meaningless. Thus, I'd argue it could be a div.
It's really just a hack; I could have used any block tag.
To achieve the visual result you want, true. But an empty paragraph
makes no sense semantically.
What would be *nice* would be if, just as you can indicate than an
element should clear the floaters it *follows*, you could indicate
that the *bottom* of an element should clear the floaters it
*contains*.


IIRC, that's due out in css 3. Coming in about 10 years (if we're
lucky) to a browser near you.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5

P: n/a

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:ajHIb.712540$Fm2.618294@attbi_s04...
Harlan Messinger wrote:
Brian wrote
Harlan Messinger wrote:
Any philosophical problems with the use of the <p
class="clear"> this way?

It's not a paragraph, is it?

<div class="clear"></div>


Well, OK. But is it a DIV?


DIV is semantically meaningless. Thus, I'd argue it could be a div.
It's really just a hack; I could have used any block tag.


To achieve the visual result you want, true. But an empty paragraph
makes no sense semantically.
What would be *nice* would be if, just as you can indicate than an
element should clear the floaters it *follows*, you could indicate
that the *bottom* of an element should clear the floaters it
*contains*.


IIRC, that's due out in css 3. Coming in about 10 years (if we're
lucky) to a browser near you.


Then I have time to get some popcorn before the movie starts.

Jul 20 '05 #6

P: n/a
Harlan Messinger wrote:
Brian wrote
Harlan Messinger wrote:
What would be *nice* would be if, just as you can indicate than an
element should clear the floaters it *follows*, you could indicate
that the *bottom* of an element should clear the floaters it
*contains*.


IIRC, that's due out in css 3. Coming in about 10 years (if we're
lucky) to a browser near you.


Then I have time to get some popcorn before the movie starts.


You have time to make the movie, too.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #7

P: n/a

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:bs************@ID-114100.news.uni-berlin.de...

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:bs************@ID-114100.news.uni-berlin.de...
To produce a side-by-side three-column layout with a uniform, bordered top and bottom , I used the same HTML with two sets of styles. The two versions
are at

http://mywebpages.comcast.net/hmessi...debyside1.html
http://mywebpages.comcast.net/hmessi...debyside2.html

The <p> with the "clear" class is there for the style version that uses
floats, to force the outer DIV to end below the columns. (Otherwise, its
height is nil.)

The two sets of styles produce identical displays in IE 6, except that

with
the second version, the main DIV starts a little bit further down.

In theoretical terms, are both versions reasonable and acceptable? In

terms
of practicality, are both versions equally likely to work correctly in

other
existing browsers, or is one more portable than the other? Any

philosophical
problems with the use of the <p class="clear"> this way?


I checked out part of the answer myself: Version 1 doesn't work correctly

in Netscape 7 at all. Version 2 works EXCEPT that the top and bottom borders
are BOTH above the columns--which means the <p class="clear"> technique
didn't work. Is it supposed to? Is it that IE is right in this case and
Netscape is wrong? By the way, Firebird gave displays identical to those in Netscape 7. Opera, meanwhile, doesn't seem to want to open right now on my
computer. It's giving me a fatal error.


Ah! It helps enormously if I use the correct

clear: both;

instead of

clear: all;

Now version 2 works identically in IE 6, Opera, Firebird, and Netscape 7,
and, except that the borders are missing altogether, even in Netscape 4.7!

I suspected in the first place that this solution was preferable to
monkeying with display: inline; and my only concern was the "clear"
technique, which I guess might really be a technique rather than a hack.
Opposing views still welcome.

Jul 20 '05 #8

P: n/a
In article Brian wrote:
Harlan Messinger wrote:

What would be *nice* would be if, just as you can indicate than an
element should clear the floaters it *follows*, you could indicate
that the *bottom* of an element should clear the floaters it
*contains*.


IIRC, that's due out in css 3. Coming in about 10 years (if we're
lucky) to a browser near you.


But there is workaround that works already at least on Opera:

:after {content:"";clear:both;}

(or something like that...)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.