10 Line Marvel: 3 column CSS only layout (No tables)
Back when I were a wee lad, typin on an amstrad PC 6128 with feet not reachin the floor, my geeky brother convinced my father to buy the magazine 'amstrad user' once or twice. Our favourite regular feature was called something like '10 Line Marvels' -- these were programs, written in basic, just 10 lines long, that did extraordinary things. It would take more than ten lines to describe the marvel that those programs represented. Can you imagine, for example, a ball bouncing around the screen? now imagine it in ten lines. impossible. (hint, it relies on a trick) This was in the days somewhat prior to including a DVD on the cover of your magazine. Two gig of code was slightly unthinkable. Ten lines of type-it yourself was just do-able. (Type-your-own roulette wheel programs were pretty darn impossible to compile... jeb got there in the end ;+) ) Anyway, ten lines of my code, these days, is mostly whitespace and comment. So i'm not gonna try and marvel you. This ain't gonna be marvelous
Here's a table-less 3 column CSS layout in ten lines. The only reason I mentioned the above reminiscence is because this happened to fit into ten lines, exactly. Hint: the nasty trick is that you specify the right column before the middle column.
<style type="text/css"><!--
.left {width:150px;float:left;padding:5px;background-color:#F00}
.right{width:150p;float:right;padding:5px;background-color:#48F}
.middle{padding:5px;background-color:#FF0} --></style>
<p class='left'>
This is the left
<p class='right'> <!-- see: right column before middle.. -->
This is the right
<p class='middle'>
This is the middle
Example of how it is expected to look:
Credit due to pixy for their 3 column layout, which informed this one (in just 120 lnes). And due to my skinnyband limitations, i haven't tested this in the flaming-fox.
(Later: I've found something about these '10 liners' (for the Amstrad CPC) see Sean McManus's Article... (quoted below):
Over time, published listings got shorter and ACU started a regular 10 liners section. The brief was to create something impressive, useful or interesting in ten lines or fewer. The quality varied a lot and the end result was usually of more interest to other programmers than end users. While people could type in the multipage games listings in the early days and enjoy playing them, the 10 line games were too simple to have lasting appeal. To appreciate any beauty in them, you had to like looking at how they were written. Some useful utilities appeared on these listings pages, but there were many trivial demonstrations that catered much more for the author's urge to show off than for any unsatisfied programming need among readers.
'mike' on Sat, 27 Aug 2005 15:35:08 GMT, sez: Works ok in the flaming fox!
'mike' on Sat, 27 Aug 2005 15:37:44 GMT, sez: Wait, in both moz and IE the middle column is wide, right? Takes up all the space not occupied by r and l. The picture of the layout in your post sorta suggests they'll all be the same width, but hain't so.
'lb' on Sat, 27 Aug 2005 15:44:18 GMT, sez: nah that's perfect, mike.
middle col is a filler. other two fixed width.
yeh my graphic implies that all cols are equal... but it aint the case.
'alan' on Mon, 29 Aug 2005 01:19:53 GMT, sez: How many lines do you need to add to make it 4 columns?
'secretGeek' on Mon, 29 Aug 2005 02:05:35 GMT, sez: 3 more lines...
<style type="text/css"><!--
.left {width:150px;float:left;padding:5px;background-color:#F00}
.right{width:150p;float:right;padding:5px;background-color:#48F}
.farright{width:150p;float:right;padding:5px;background-color:#4F8}
.middle{padding:5px;background-color:#FF0} --></style>
<p class='left'>
This is the left
<p class='farright'> <!-- see: far right column before right.. -->
This is the far right
<p class='right'> <!-- see: right column before middle.. -->
This is the right
<p class='middle'>
This is the middle
|
secretGeek .:dot Nuts about dot Net:.
Just Wally
Complete secretGeek Archives
The Best Software Writing I
The Business Of Software (Eric Sink)
