Using a column layout?

[ajnorris]

I'm sure this question has been asked a hundred times, but I'm relatively new to CSS, so please bear with me. I have started creating a page that has the following for layout: Across the top, a logo on the left, a picture on the right and some navigation tabs in the middle right underneath. Below that in the main section of the page I have a series of bordered boxes on the left side of the page that kind of creates a sidebar of sorts. Then, to the right of these boxes, the meat of the page, which will be a classifieds type listing. At the bottom a footer with text navigation and the rest of the standard goodies everyone has at the bottom. So far I have just been placing all of the elements on my page using absolute positioning and just giving coordinates for everthing. After reading through some posts, I get the feeling that this may not be the best way to set it up, and I've heard some things about using a "columned" layout. So my question(s) is(are), what does this mean, is it right for me, and if it is right for me, how would I go about setting this up? Thanks in advance for any response.

[gohankid77]

There is no way to create true columns yet. Until CSS3 becomes a W3C recommendation (and when browsers support CSS3 columns [w3.org]), tables or something to that effect will have to do.

<table>
 <tr>
 <td>Row 1, Column 1</td>
 <td>Row 1, Column 2</td>
 </tr>
 <tr>
 <td>Row 2, Column 1</td>
 <td>Row 2, Column 2</td>
 </tr>
</table>

As you can see, there is no real way to create a columnar section. If the text happens to extend past the height of a table cell, the cell will just expand rather than extending into Row 2 or continuing to Column 2. That is just the nature of tables.

[Saltminer]

ajnorris,
That would be a two column layout, with header and footer.
Do a search on Google for "CSS two column layout", and you'll find a lot of CSS scripts and examples.

Jimmy

[Robin_reala]

In reply to Gohankid's post; Mozilla now has trial support for CSS3 columns.

[createErrorMsg]

Until CSS3 becomes a W3C recommendation (and when browsers support CSS3 columns), tables or something to that effect will have to do.

Oh, ye of little faith. ;)

CSS has plenty of ways to accomplish a columned layout without resorting to bleeding edge properties like those proposed for CSS3. Good old CSS2, with the help of one tiny image can accomplish what you want.

Using absolute poitioning is a perfectly acceptable way to layout a page, but it can quickly become a tangled mess of pixel precise placement. I prefer to use floats to layout pages. Some say floats are unreliable, but usually this opinion stems from the fact that they (floats) are handled differently in different browsers, requiring a few work arounds to ensure cross-browser stability. Here's a thread [webmasterworld.com] where you can read about some float basics.

As for creating a columned layout, look for an article called "Faux Columns" by Dan Cedarholm on the site a list apart dot com. It describes a way to use floats in conjunction with a wide margin and a vertically tiled background image to create a fluid, two column layout.

And of course that's only ONE option. Other places to look for multi-column CSS layouts are...
[bluerobot.com...]
[positioniseverything.net...]

[gohankid77]

But to have text flow from one column to the next column beside it [u]automatically[/u], once the first column gets full of course, there is no official way to do that yet, as far as I know. Please feel free to expand on your post for the benefit of others, createErrorMsg.

In reply to Gohankid's post; Mozilla now has trial support for CSS3 columns.

Really? Hmm... I'll have to check into that... Doesn't seem to work...

[ajnorris]

First of all, thanks for the responses, they've been very helpful. So I wwas reading through some the sites listed, and I just want to make sure that I'm understanding this right. The "columns" are just container divs that have all of your other elements inside of them. This is how they stay separate? Am I on the right track here, or way off?

[gohankid77]

Yeah, that's right. You then use CSS to style and position the divs.

[createErrorMsg]

But to have text flow from one column to the next column beside it [u]automatically[/u], once the first column gets full of course, there is no official way to do that yet, as far as I know.

That's an interesting idea. It's never occured to me to try to do something like that. Continuing one peice of content from one column into another (as they do in newspapers, for instance) seems like a layout technique born from the constraints of print media. On a web page, where your 'paper' is as long as you need/want it to be, it's unnecessary to carry one 'story' over into a new column.

But that doesn't mean you wouldn't WANT to for aesthetic reasons, perhaps, and you're right...I don't know of any automatic way to accomplish this.

But I don't think a 'newspaper style' layout was what the OP wanted. I think he/she was looking for a way to layout their site in a two column layout, where one column is a sidebar and the other holds the content, and in such a case CSS provides multiple methods for doing so. Here's the code for the one I mentioned above (faux columns), assuming a left sidebar at 200px width and a right content at 500px width inside of a container at 700px width...

prerequisites:
image file named background.gif created at width=200px, height=1px the same color/background as the color/background of the floated sidebar: in this case, red (see below).

html:
<div id="header">Header text.</div>
<div id="container">
<div id="sidebar">Sidebar text.</div>
<div id="content">Content text.</div>
</div>
<div id="footer">Footer text.</div>

css:
#header{
... /*header styles won't effect the columns*/
}
#container {
float: left; /*forces container to enclose the floated sidebar*/
width: 700px;
background: transparent url(path/to/background.jpg) repeat-y left;
}
#sidebar{
float: left;
width: 200px;
background: red; /*better to use hexdec for colors but KW are easier to visualize in an example*/
}
#content{
margin-left: 200px;
}
#footer{
clear: left; /*ensures that the footer stays below #container*/
... /*other footer styles won't effect the columns*/
}

This covers most of the basics for this layout. You'll have to hack/workaround the IE box model, but that's a topic for another post. The footer will probably trigger one of IE's display bugs, so a 'cure' will be needed for that, but again, that's another post. This just covers the basics of getting two columns up and running in a compliant browser. And again, it's only ONE way to do it.