<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Warping it up! &#187; css3</title>
	<atom:link href="http://www.bytefarmers.com/log/tag/css3/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bytefarmers.com/log</link>
	<description>Fini Alring's Glossy Tech Zine</description>
	<lastBuildDate>Sat, 15 May 2010 09:26:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>CSS3: Multi-column Demo for Firefox</title>
		<link>http://www.bytefarmers.com/log/2005/09/30/css3-multi-column-demo-for-firefox/</link>
		<comments>http://www.bytefarmers.com/log/2005/09/30/css3-multi-column-demo-for-firefox/#comments</comments>
		<pubDate>Fri, 30 Sep 2005 07:33:43 +0000</pubDate>
		<dc:creator>Fini Alring</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[beta]]></category>
		<category><![CDATA[column]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[demo]]></category>
		<category><![CDATA[dev]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[multi]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.bytefarmers.com/log/?p=611</guid>
		<description><![CDATA[Since the beginning of web design, there has always been a need to make multi-columned text pages. Sadly HTML and CSS 1+2 has rather weak support for this kind of wrapping techniques. Many workarounds have been created for this using JavaScript and server side pages. But the draft specification of &#8220;CSS3 module: Multi-column layout&#8221; promises [...]]]></description>
			<content:encoded><![CDATA[<p>Since the beginning of web design, there has always been a need to make multi-columned text pages. Sadly HTML and CSS 1+2 has rather weak support for this kind of wrapping techniques. Many workarounds have been created for this using JavaScript and server side pages. But the draft specification of &#8220;<a href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118/">CSS3 module: Multi-column layout</a>&#8221; promises to solve this &#8220;column problem&#8221; by adding a set of CSS properties.</p>
<p><a href="http://www.mozilla.org/projects/firefox/">Mozilla Firefox 1.5 beta</a> adds preliminary support for these properties, so that developer can begin playing with it, not however that the reason the properties begin with &#8220;-moz-&#8221; is that the CSS3 Multi-column specification is still a draft, so therefore they should not be used for real web design yet, unless it can make a clean fallback when meeting non-mozilla 1.5+ clients.</p>
<p>I have created <a href="http://www.bytefarmers.com/codepit/css/css3_multicol_demo.html">CSS3: Multi-column module demo for Firefox 1.5 beta</a> &#8211; which shows some of the wonders of the new multi-column features, as well a some other CSS properties to create a nice flowing page with highly dynamic columns, and pretty stable compared to many of the older methods, but you need to use <a href="http://www.mozilla.org/projects/firefox/">Mozilla Firefox 1.5 beta</a> &#8211; which I would only recommend to Web Developers.</p>
<p>You can also check some screenshots of the demo, showing it&#8217;s ability to create as many columns as it can, while maintaining nice readability thru limited line-width.</p>
<table border="0" cellspacing="10" cellpadding="10">
<tr>
<td><a href="http://www.flickr.com/photos/fini/47934011/" title="When resized this small, it uses single-column layout. Suitable for 640x480."><img src="http://static.flickr.com/28/47934011_6b2b7e555e_t.jpg" width="79" height="100" alt="CSS3 Multi-column demo 0.2b 001" /></a></td>
<td><a href="http://www.flickr.com/photos/fini/47934015/" title="Dual columns! Suitable for 800x600."><img src="http://static.flickr.com/29/47934015_841b799b8d_t.jpg" width="100" height="86" alt="CSS3 Multi-column demo 0.2b 002" /></a></td>
</tr>
<tr>
<td><a href="http://www.flickr.com/photos/fini/47934028/" title="Triple-columns, suitable for 1024x768."><img src="http://static.flickr.com/24/47934028_b9f4f959c6_t.jpg" width="100" height="59" alt="CSS3 Multi-column demo 0.2b 003" /></a></td>
<td><a href="http://www.flickr.com/photos/fini/47934058/" title="Quad-columns, suitable for 1280x1024."><img src="http://static.flickr.com/26/47934058_a46305cc7d_t.jpg" width="100" height="49" alt="CSS3 Multi-column demo 0.2b 004" /></a></td>
<td><a href="http://www.flickr.com/photos/fini/47934073/" title="5-columns with reduced font-size, suitable for 1280x1024."><img src="http://static.flickr.com/30/47934073_8bc11c5da9_t.jpg" width="100" height="69" alt="CSS3 Multi-column demo 0.3b 001" /></a></td>
</tr>
</table>
<p>Don&#8217;t believe the rumours, check the demo yourself here: </p>
<p><a href="http://www.bytefarmers.com/codepit/css/css3_multicol_demo.html">CSS3: Multi-column module demo for Firefox 1.5 beta</a> </p>
<p>See more code samples at <a href="http://developer.mozilla.org/en/docs/CSS3_Columns">Mozilla Developer: CSS3 Columns</a>.</p>
<p><a href="http://www.alistapart.com/articles/css3multicolumn">A List Apart: Articles: Introducing the CSS3 Multi-Column Module</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.bytefarmers.com/log/2005/09/30/css3-multi-column-demo-for-firefox/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced) (user agent is rejected)
Database Caching 13/19 queries in 0.012 seconds using disk

Served from: www.bytefarmers.com @ 2010-07-30 11:40:14 -->