two flowed columns?
in [CSS]
|
From: bealoid on 23 Jan 2008 06:11 [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'?
From: David Stone on 23 Jan 2008 08:23 In article <Xns9A2E71DF4C6C5YAsfKJXSTO(a)194.117.143.38>, bealoid <signup(a)bealoid.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.
From: bealoid on 23 Jan 2008 14:20 David Stone <no.email(a)domain.invalid> wrote in news:no.email-0DB7E8.08230123012008(a)news1.chem.utoronto.ca: > In article <Xns9A2E71DF4C6C5YAsfKJXSTO(a)194.117.143.38>, > bealoid <signup(a)bealoid.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.
From: Andy Jacobs on 23 Jan 2008 15:01 On 23/1/08 11:11 am, in article Xns9A2E71DF4C6C5YAsfKJXSTO(a)194.117.143.38, "bealoid" <signup(a)bealoid.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
From: David Stone on 23 Jan 2008 14:53 In article <Xns9A2EC4C92A29CYAsfKJXSTO(a)194.117.143.53>, bealoid <signup(a)bealoid.co.uk> wrote: > David Stone <no.email(a)domain.invalid> wrote in > news:no.email-0DB7E8.08230123012008(a)news1.chem.utoronto.ca: > > In article <Xns9A2E71DF4C6C5YAsfKJXSTO(a)194.117.143.38>, > > bealoid <signup(a)bealoid.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.
|
Next
|
Last
Pages: 1 2 Prev: Removing one margin/edge from one cell in a table Next: Overflow problem |