Create liquid layouts with CSS

Collapse -

Oversimplified

by cmessina · 16 years ago In reply to Create liquid layouts wit ...

While again, I commend you for bringing to light new CSS layout
techniques for your audience and giving them a simple place
from which to begin, in this case I feel like you've left out a lot of
the discussion that's gone on about ditching table-based layout.
For one, one of the goals is to make a page design more
accessible and more semantically correct; the way to test this is
to remove your stylesheets and see how your pages look. That's
how folks not using a visual browser will see your site (screen
readers, text-only browsers, etc).

In this example, having the left and right column precede the
body content doesn't necessarily make sense. Unless there is a
reason for putting your content in this order and not use to
make the layout "work", I would recommend finding an
alternative approach.

For fixed width layouts, consider: http://
www.positioniseverything.net/ordered-borders-center.html

For fluid layouts, try: http://www.positioniseverything.net/
thr.col.stretch.html

One thing that is missing from this article is a discussion about
how to make the background color cover the total height of the
sidebars when their content is less than the main column
content. The Fluid example I gave fixes this, and is described in
a somewhat more involved way here: http://
www.alistapart.com/articles/fauxcolumns/

Collapse -

by EdwardHammerbeck · 16 years ago In reply to Create liquid layouts wit ...

The layout is very inconsistent between browsers. I'm having to futz with it quite a bit to get it to render the same in both Mozilla and IE.

Collapse -

single stylesheet solution

by red_wolf(at)nospammail.net · 16 years ago In reply to

Tested in FireFox 0.8, Mozilla 1.6 and IE 6.0.2800
Dont use the <h1> tag and try this stylesheet.

body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
font-size: 50px;
background-color: aqua;
}
div#left {
float: left;
padding: 5px;
width: 150px;
padding: 5px;
background-color: red;
clear: right;
}
div#right {
float: right;
padding: 5px;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 165px 0px 165px;
text-align: justify;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}

Collapse -

oops

by red_wolf(at)nospammail.net · 16 years ago In reply to single stylesheet solutio ...

Delete the duplicate padding line in the div#left, although it should still work with it.

div#left {
float: left;
padding: 5px;
width: 150px;
background-color: red;
clear: right;
}

Collapse -

Leave out <h1>?

by Harry_O · 16 years ago In reply to single stylesheet solutio ...

The whole idea was to use HTML for structuring the document, and CSS for design and layout.
We removed tables from HTML, because they are layout. Should we now remove <h1> tags from the HTML and create the structure of the text in CSS? I don;t think this is the proper way. There must be other ways to make the page look consistent in all major browsers.

Collapse -

h1 should be important

by RMcVay · 16 years ago In reply to Leave out <h1>?

The whole point of the new page design paradigm is to use sematically significant mark up and do all presentational effects in CSS. The headings are significant to the structure of a document. They should NOT be used simply for the way you *think* they'll be rendered by the browser.

Collapse -

The link to the example page isn't working!

by kognitiondesign · 16 years ago In reply to Create liquid layouts wit ...

tried several times to go to this page but nothing.

Collapse -

The link appears to be working

by MaryWeilage Editor · 16 years ago In reply to The link to the example p ...

Sorry to hear you're having trouble getting the link in the e-newsletter to work. Please try it again; it's working for me. Thank you!

Collapse -

Tested on Mac?

by walewis · 16 years ago In reply to Create liquid layouts wit ...

Has anyone tested this on Mac/IE? If so does it render ok?

Collapse -

Response from author Michael Meadhra

by MaryWeilage Editor · 16 years ago In reply to Tested on Mac?

Note from the editor: The following response is from author Michael Meadhra.

Yes, it works in Mac/IE 5.2 (as tested on BrowserCam) and every other CSS-compatible browser I tested. In non-compliant browsers such as NN4, it fails gracefully by displaying unstyled text.

Note that the sample code from that article is intended to show that liquid layouts are possible. It works (in principal) across all CSS-compatible browsers. However, there are rendering differences between the different browsers and the sample code doesn't attempt to address those. As a result, the sample code produces a liquid layout across all browsers -- it does NOT
produce an IDENTICAL liquid layout across all browsers.

That said, most of the differences between browsers were relatively minor and could be addressed easily with well known hacks. Win/IE4 and Linux/Konqueror3 are the only ones in the BrowserCam test suite with seriously munged displays (excessive padding in the center column) but even there, the layout is liquid and the text remains readable.

Web Development

General discussion