tanfa - archived muse
:: View Archives List :: Home :: Skip to Have a Muse
Archive dated December 10, 2004
Flexible CSS Floats
Gee I can't believe it's been nearly a year, where does the time go! But at last I have Floated Multi Column Layout demo online.
The Flexi-Floats Layout is not what it was back then though, it now offers the best of choice as far as flexibility goes and although the demonstration shows a traditional 3 Column Layout it can easily be made to hold more columns. It's list of features include:
- Ordered Source
- Fluid or fixed width
- Sidebars can be Fixed Width or Fluid
- Fluid main content area
- It can be centered or full width
- full width header and footer
- any column longest, all control footer
- has capacity for more columns
The layout is entirely float based and its flexibility is inspired by Ryan Brill's Negative Margin Technique. With the "columns" being drawn using background images in a giant "sliding doors" technique (thanks to Doug Bowman) to allow the center "column" to expand/contract.
I've taken Ryan Brill's 2 column Layout technique a step further, simplified the source and removed some wrapper divs. The source is still ordered and I believe the layout could now sustain more than three columns very easily. The header could be removed from the top of the HTML flow and placed back at the top of the page visually using Absolute Positioning, if your idea of ordering the source code includes having the main content appear very first in the source.
Flexi-Floats ~ A Multi Column CSS Layout
You've done it again, lady! Many thanks.... don't know where I'd be without you!
Posted By Vkaryl on 27/02/2005 at 4:29am «þ»
Interesting solution to 100% height columns ... care must be taken to not stretch the viewport too wide or the bottom effect on the columns break.
Posted By Nik on 13/07/2005 at 15:08pm «þ»
Excellent method! It is efficient simple and easy to adapt.
Thanks a lot.
Posted Bythogau on 23/07/2005 at 16:41pm «þ»
Great work, switching from the old-and-not-so-good-yet-working tables to CSS can prove to be hard.
However, I've been unable to add a min-width for the whole page (without breaking something else in the display).
Have you ever tried adding this (along with making it work with both IE & Firefox). I tried a bunch of hacks but without a complete success.
Sincerely
Posted By MaximeBombardier on 31/10/2005 at 20:42pm «þ»
great template! worked fine in all Mac browswers except IE. Haven't tried it in windoze yet. Been trying to find a way to quit working in dependable, inflexible tables, were it not for f****** IE.
Posted By TimChambers on 31/12/2005 at 12:50pm «þ»
Like others, I offer kudos. A question, tho: Since both sidebars are created with background .gifs, are these .gifs just simple bars (since repeat-y) like SimpleBits, or what?
All else in the layout works to a "T".
Thanx.
Posted By Robin on 03/03/2006 at 22:41pm «þ»
If you are going to waste people's time with lame ads... at least make sure your website is using CSS for the layout instead of lame tables.
Posted By offended on 29/03/2006 at 18:47pm «þ»
Excellent article is your floated column css layout. I have tried many solution but yours was one of the best. I have a question though if you have a solution.
If you change the doctype declaration so that browsers run in quirk mode than the design is failing on opera 8.52. The problem exist only in opera 8+. ealier version of opera works fine.
It runs fine in IE and Firefox.
Any idea why it behaves this way?
I have setup the sample on #
Posted By Mustafa on 31/03/2006 at 10:04am «þ»
Sorry but muses are now closed on this article
previous :: top of page :: next
Just what I have been looking for. Position is Everything's piefecta seemed like overkill. Noodle Incident didn't do footers.
Thanks. This will be incorporated into the web site for London's Ahoy Centre - www.ahoy.org.uk
And most likely many things I do from now on.
Posted By DuncanDrury on 20/12/2004 at 23:41pm «þ»