two flowed columns?

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. The page has a heading block, two columns,
and a footer.

Here's the css for the two columns:
#leftstuff {
float: left;
width: 44%;
margin: 0;
padding: 1em
}

#rightstuff {
width: 44%;
margin-left: 50%;
padding: 1em
}

Using this I have to have two divs in the html. So I have to balance the
two columns using my skill and judgement - a sub optimal approach.

Is there any way I can get the two columns to 'flow'?

In article <Xns9A2E71DF4C6C5YAsfKJXSTO (AT) 194 (DOT) 117.143.38>,
bealoid <signup (AT) bealoid (DOT) co.uk> wrote:

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. The page has a heading block, two columns,
and a footer.

Here's the css for the two columns:
#leftstuff {
float: left;
width: 44%;
margin: 0;
padding: 1em
}

#rightstuff {
width: 44%;
margin-left: 50%;
padding: 1em
}

Using this I have to have two divs in the html. So I have to balance the
two columns using my skill and judgement - a sub optimal approach.

Is there any way I can get the two columns to 'flow'?

If you mean, "Can I get text to automatically fill the first
column, and then overflow by filling the second?" I don't think so.
(At least, not with html/css only)

If you mean, "Can I avoid the text in the right column wrapping
underneath the text in the left column in the event that the text in
the right column fills more vertical space?", then the answer
is probably yes (try a solid left-border on rightstuff that is
the same colour as the background on leftstuff, instead of a
margin-left.)

However, it would be good to know what effect you really want to
achieve here: if you are looking to reproduce the two-column page
layout you might find in a book or magazine, I would strongly
suggest NOT to do so for a web page: trying to read text that is
so formatted on a screen is really annoying, due to the regular
necessity to scroll up/down when moving from one column to the
next.

David Stone <no.email (AT) domain (DOT) invalid> wrote in
news:no.email-0DB7E8.08230123012008 (AT) news1 (DOT) chem.utoronto.ca:

In article <Xns9A2E71DF4C6C5YAsfKJXSTO (AT) 194 (DOT) 117.143.38>,
bealoid <signup (AT) bealoid (DOT) co.uk> wrote:

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. The page has a heading block, two
columns, and a footer.

Here's the css for the two columns:
#leftstuff {
float: left;
width: 44%;
margin: 0;
padding: 1em
}

#rightstuff {
width: 44%;
margin-left: 50%;
padding: 1em
}

Using this I have to have two divs in the html. So I have to balance
the two columns using my skill and judgement - a sub optimal
approach.

Is there any way I can get the two columns to 'flow'?

If you mean, "Can I get text to automatically fill the first
column, and then overflow by filling the second?" I don't think so.
(At least, not with html/css only)

Yes, that's what I wanted. I don't want to use anything but html and
css. I understand there might be something in CSS3, but it's not
implemented in many (any?) browsers yet.

[snip]

However, it would be good to know what effect you really want to
achieve here: if you are looking to reproduce the two-column page
layout you might find in a book or magazine, I would strongly
suggest NOT to do so for a web page: trying to read text that is
so formatted on a screen is really annoying, due to the regular
necessity to scroll up/down when moving from one column to the
next.

I agree. I've found a few articles suggesting why it's a bad idea, and I
mostly agree with them.

I have a long list of items, each with a small amount of text, a link,
and an image. (All the images are 300 pixels wide.)

There's no order to the list.

At some point I might have several lists of different categories of item,
with a sub-header for each.

Here's a monospaced font diagram :-

HEADING
sub heading
list list
list list
list list
list list
list
sub heading
list list
list list
sub heading
list list
list list
FOOTER


Having flowed columns makes adding items to the lists much easier.

In article <Xns9A2EC4C92A29CYAsfKJXSTO (AT) 194 (DOT) 117.143.53>,
bealoid <signup (AT) bealoid (DOT) co.uk> wrote:

David Stone <no.email (AT) domain (DOT) invalid> wrote in
news:no.email-0DB7E8.08230123012008 (AT) news1 (DOT) chem.utoronto.ca:
In article <Xns9A2E71DF4C6C5YAsfKJXSTO (AT) 194 (DOT) 117.143.38>,
bealoid <signup (AT) bealoid (DOT) co.uk> wrote:

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. The page has a heading block, two
columns, and a footer.
[snip]

Is there any way I can get the two columns to 'flow'?

If you mean, "Can I get text to automatically fill the first
column, and then overflow by filling the second?" I don't think so.
(At least, not with html/css only)

Yes, that's what I wanted. I don't want to use anything but html and
css. I understand there might be something in CSS3, but it's not
implemented in many (any?) browsers yet.
[snip]
I have a long list of items, each with a small amount of text, a link,
and an image. (All the images are 300 pixels wide.)

There's no order to the list.

At some point I might have several lists of different categories of item,
with a sub-header for each.

Here's a monospaced font diagram :-

HEADING
sub heading
list list
list list
list list
list list
list

If each individual list item is short (in terms of length), and you
really don't want to have a linear presentation, or have each
sub-heading on a separate page, then making the content of each
unordered list into a horizontal list that wraps within the parent
container might do what you want.

Take a look at:
http://css.maxdesign.com.au/listamatic/horizontal01.htm

- it might at least serve as a starting point.

On 23/1/08 11:11 am, in article Xns9A2E71DF4C6C5YAsfKJXSTO (AT) 194 (DOT) 117.143.38,
"bealoid" <signup (AT) bealoid (DOT) co.uk> wrote:

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. The page has a heading block, two columns,
and a footer.

Here's the css for the two columns:
#leftstuff {
float: left;
width: 44%;
margin: 0;
padding: 1em
}

#rightstuff {
width: 44%;
margin-left: 50%;
padding: 1em
}

Using this I have to have two divs in the html. So I have to balance the
two columns using my skill and judgement - a sub optimal approach.

Is there any way I can get the two columns to 'flow'?

Not yet. I think there will be a column attribute in CSS3 but it's going to
be a while before it's safe. Bloody brilliant idea though (assuming you can
overcome potential accessibility issues).

--
Andy Jacobs
http://www.redcatmedia.co.uk

Andy Jacobs wrote:

On 23/1/08 11:11 am, in article Xns9A2E71DF4C6C5YAsfKJXSTO (AT) 194 (DOT) 117.143.38,
"bealoid" <signup (AT) bealoid (DOT) co.uk> wrote:

Is there any way I can get the two columns to 'flow'?

Not yet. I think there will be a column attribute in CSS3 but it's going to
be a while before it's safe. Bloody brilliant idea though (assuming you can
overcome potential accessibility issues).

Like this example?

<http://weblogs.mozillazine.org/roc/archives/2008/01/travel_2.html>

--
Gus

On Jan 23, 10:11*pm, bealoid <sig... (AT) bealoid (DOT) co.uk> wrote:

[cross posted, Follow ups set to ciwas]

I'm using CSS to style a page. *The page has a heading block, two columns,
and a footer.

Here's the css for the two columns:
#leftstuff {
* float: left;
* width: 44%;
* margin: 0;
* padding: 1em

}

#rightstuff {
* width: 44%;
* margin-left: 50%;
* padding: 1em

}

Using this I have to have two divs in the html. *So I have to balance the
two columns using my skill and judgement - a sub optimal approach.

Is there any way I can get the two columns to 'flow'?
Give us a URL to look.

I for one can't be fucked copy and paseing your code in a file and
useing my hosting space *that pay good money for hosting your code
just so I can view what it looks like.
--
Regards Chad. http://freewebdesignonline.org