Re: CSS multicolumn layout solutions (was: RE: CSS not enough )

On Saturday 12 January 2002 16:43, Christian Wolfgang Hujer wrote:
[...]
|   > > I think, for a three column layout this definitely is the best
|   > > solution. And everything regarding margins, borders and paddings
|   > > works
|   > finest in the
|   > > first and third column.
|   >
|   > You have me thinking in 'pure' ideals now ... :)
|   >
|   > Doesn't it strike you strange that the placement of columns in
|   > the html page
|   > affects the layout?
|
|   Oh, and how it does! :(
|   Really. That's annoyingly ugly (though still better than some other
|   solutions).

Hello Christian, Robert,

following CSS/HTML code does the trick (3-column layout)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">

#left_column {
display: inline-block;
left:5px;
top:50px;
width:190px;
border:1px solid #cccccc;
background-color:#EDEDED;
 }

#center_column {
display: inline-block;
/* adjust this to the width you need */
width: 50%;
margin-left: 10px;
margin-right:10px;
border:1px solid lime;

 }

#right_column {
display: inline-block;
right:10px;
top:50px;
width:180px;
border:1px solid #cccccc;
background-color:#EDEDED;
 }
</style>

<body>
<!--  left -->
<span id="left_column">
Left column text
</span>
<!--  center block -->
<span id="center_column">
Center column text
</span>
<!-- column on the right side  -->
<span id="right_column">
Right column text
</span>
</body>
</html>

As I wrote beofre: you need either MS IE6/Win or MacIE5 to render example 
above "correctly"- as other browsers do not support inline-block (yet)
But, other browsers still can ignore display: inline-block rule and display 
SPAN elements as normal SPAN (display: inline) blocks. So, while formatting 
degrades in this case, content remains accessible.

|
|   You know we are talking about a yet unsolved quest: multicolumn layout on
|   web pages.
|   So even the best currently available solution is just an interims
| solution

so, you can use {float: left} (right), {display: inline-block}, {position: 
absolute} or {position: relative} to achieve multi-column layout.
I also think that if you create table with just 3 cells to put all stuff 
inside (for 3 columns) - it's still ok. But if you have hundreds of <TD> 
cells - - HTML becomes unreadable, and you can't count that thgis stuff will 
be supported by the future versions of browsers.

|   :(
|
|   The final newspaper-style solution already is on the way:
|   http://www.w3.org/TR/css3-multicol/
|
|   Though as far as I see the CSS3 Multicol module really covers only
|   newspaper-style.
|   But that's what's currently missing, and everything else is already
| solved (though it needs improvement).
|
|   I am really looking forward to see the CSS Level 3 Recommendation :)
|   (I am not so much looking forward to see the first CSS Level 3
|   implementations, I believe there again will be much trouble as with CSS 2

As it was mentioned on www-style list some time ago, it's unlikely that 
someone will implement completed CSS2 specification.
Note: CSS3 has modular structure.
So, with CSS3 Core implemented - you can claim CSS3 conformance.
But, this doesn't mean that CSS3-compliant browser will support CSS3 Multicol 
module (or CSS3 Tables, or CSS3 Absolute Positioning)

|
|   Greetings
|
|   Christian

Cheers,
-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/

Attachments

Received on Saturday, 19 January 2002 09:36:18 UTC