3 divs side-by-side?

[theo]

Cheers,
What is the acceptable fashion for putting 3 divs side-by-side? I've seen
examples in horizontal menus, and they all were float:left; so that they all
were riding up against each other. Example below, left and mid were floated
left, and the right box floated to the right. Seems to work this way also,
but is this kosher? Is all float:left best?
Thanks,
cc

#left {
margin: 0% .1%;
padding:0;
height:81px;
width:20%;
float:left;
border:1px solid #000000;
text-align:center;
}

#mid {
margin:0% 0%;
padding:0;
height:81px;
float:left;
width:59%;
border:1px solid #000000;
text-align:center;
}

#right {
margin:0% .1%;
padding:0;
height:81px;
width:20%;
float:right;
border:1px solid #000000;
text-align:center;
}

 

[Travis Newbury]

Cheers,
What is the acceptable fashion for putting 3 divs side-by-side?

A quick search of google for CSS layout would reward you with several
code examples.

 

[Richard]

Cheers,
What is the acceptable fashion for putting 3 divs side-by-side? I've
seen
examples in horizontal menus, and they all were float:left; so that
they all
were riding up against each other. Example below, left and mid were
floated
left, and the right box floated to the right. Seems to work this way
also,
but is this kosher? Is all float:left best?
Thanks,
cc

search for "CSS the holy grail".
You'll get a good example of how to do it correctly.

The use of "float:left" seems to be more common than "float:right".
Although either is appropriate. It's just a matter of how you place your
content.
Using left, you'll see an output like 1....2....3.
Using right, you're output would be 3.....2.....1

If you want to put another division below those 3 columns, then you'll need
to terminate the floating.
That can be done easily with <br clear="both">
Or in the ending division, "clear:both".

 

[Andy Dingley]

What is the acceptable fashion for putting 3 divs side-by-side?

Generally something derived from glish.com or BlueRobot's examples.


BTW - I'd suggest using a class as the identifier in the HTML, to
attach the CSS, rather than an id. You can use both class and id in
the HTML, but the CSS should refer to the class alone.

..left-column { ... }

..body-text { ... }

..right-column { ... }

If you make the CSS refer to an id at the high level pf the page
structure, that's a very "strong" binding. It can make it harder to
have small sections of CSS applying to sub-sections inside this.
Instead of simply using a class like this
<ul class="foo" > <li>...
and
ul.foo li { ... }

You would need to qualify the CSS including the id used in the top
level as well
#body-text ul.foo li { ... }

This makes it harder to modularise and re-use your CSS between sites.

 

[rf]

A quick search of google for CSS layout would reward you with several
thousand

code examples.

 

[rf]

If you want to put another division below those 3 columns, then you'll need
to terminate the floating.

Wrong terminology. One does not "terminate" the float, one is, to quote the
reccomendations, "controlling the flow next to the float". "Terminating" the
float might imply that it would continue if not "terminated". This is simply
not the case.

That can be done easily with <br clear="both">

Do you simply make this stuff up as you go RtS?

If you do then this may explain how you can get it so invariably wrong.

Go over to the W3C reccomendations and discover that the possible values for
the *deprecated* clear attribute are none|left|right|all. Nowhere is 'both'
mentioned,.

Or in the ending division, "clear:both".

One can only presume you actually meant this to be inside a style attribute.
If you did then why didn't you bloody say so?

Theo: Do not ever pay any attention to RtS. He is *always* wrong.

 

[Richard]

Wrong terminology. One does not "terminate" the float, one is, to quote
the
reccomendations, "controlling the flow next to the float".
"Terminating" the
float might imply that it would continue if not "terminated". This is
simply
not the case.

Do you simply make this stuff up as you go RtS?

If you do then this may explain how you can get it so invariably wrong.

Go over to the W3C reccomendations and discover that the possible
values for
the *deprecated* clear attribute are none|left|right|all. Nowhere is
'both'
mentioned,.

One can only presume you actually meant this to be inside a style
attribute.
If you did then why didn't you bloody say so?

Theo: Do not ever pay any attention to RtS. He is *always* wrong.

Although the usage of either method has been deprecated, how do you go about
telling older browsers, let alone new ones, not to use it?

If said usage of a deprecated item validates, then how does that bolster
your claims?

As I am always wrong, then you are by far the world's greatest expert on the
subject.

 

[rf]

Although the usage of either method

And just which "method" are you talking about. It appears, from your
inadequate trimming, that you are referring to my advice to Theo. Sound
advice it is, too

I will assume you are in fact talking about clear="all" vs clear: both;

has been deprecated, how do you go about
telling older browsers, let alone new ones, not to use it?

I simply can not understand what you are talking about. Why do you need to
tell a browser any bloody thing? Its the code that contains the deprecated
attribute, not the browser. Also, why would anybody try to tell a browser
not to use anything? This is why it is deprecated, so it still exists for
legacy pages. Doesn't mean it should, or even may, be used for new pages
though.

And besides, only the clear attribute is deprecated, not the clear property.

If said usage of a deprecated item validates,

Usage of a deprecated attribute (not item) does *not* validate, not when one
uses the recommended doctype.

then how does that bolster
your claims?

They are not claims, they are facts straight out of the W3C recommendations
and they don't *need* to be bolstered.

As I am always wrong,

then you are by far the world's greatest expert on the
subject.

*Anybody* could be considered an expert on the subject when posting to the
same thread as you