Web Development

General discussion

Gravatar
0 Votes
Locked

Create liquid layouts with CSS

By MaryWeilage Editor ·
This week's Design and Usability Tactics e-newsletter explains how you can use CSS floats to create a three-column page layout.

What are your thoughts on this example on how to use floated divs to create the side columns of a three-column liquid layout? Do you think you'll apply these techniques in your own development environment? Share your comments about using CSS to create liquid layouts.

If you aren't subscribed to the Design and Usability Tactics e-newsletter, visit our e-newsletter subcenter to subscribe to this free e-
newsletter:
http://nl.com.com/MiniFormHandler?brand=builder&subs_channel=bldr_front_door&list_id=e614&;;tag=fb

* Please delete any extra spaces that appear when you paste this link into your browser.

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

gravatar
Collapse -

Oversimplified

by cmessina 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/

gravatar
Collapse -

by EdwardHammerbeck 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.

gravatar
Collapse -

single stylesheet solution

by red_wolf(at)nospammail.net 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;
}

gravatar
Collapse -

oops

by red_wolf(at)nospammail.net 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;
}

gravatar
Collapse -

Leave out <h1>?

by Harry_O 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.

gravatar
Collapse -

h1 should be important

by RMcVay 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.

gravatar
Collapse -

The link to the example page isn't working!

by kognitiondesign In reply to Create liquid layouts wit ...

tried several times to go to this page but nothing.

gravatar
Collapse -

The link appears to be working

by MaryWeilage Editor 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!

gravatar
Collapse -

Tested on Mac?

by walewis In reply to Create liquid layouts wit ...

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

gravatar
Collapse -

Response from author Michael Meadhra

by MaryWeilage Editor 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.

Back to Web Development Forum

Start or search

Related Discussions

Related Forums