Friday Challenge. January 23, 2004 Whether it’s a deceptively simple problem or a case of being too close to the code to see the easy answer, I’ve been struggling with this one problem on and off for months now: Is it possible to use floats to position a fixed-width sidebar on the right of a page, with a liquid content area, if the content comes before the sidebar in the markup? Floating, and not absolute positioning is necessary for the sake of a clearing footer. It’s easier to see what I’m after by looking at the code: <div id="content"> ... Corresponding CSS: Simple, right?
But why should the sidebar need to go before the content in the code order? Note that floats are reliant on code order, and do work best with defined widths, but with the proper CSS you should be able to get a simple two-column layout working. I can’t. Again — 1) no changing the order of the code (although adding new divs would be fine), and 2) no using absolute positioning unless you can somehow make it work with the footer. 3-column Nirvana : My three column css layout. In Search of the Holy Grail. I’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails. Article Continues Below But the name’s out there, and we all know what it means.
Three columns. Many articles have been written about the grail, and several good templates exist. A recent project has brought my personal grail quest to an end. Have a fluid center with fixed width sidebars,allow the center column to appear first in the source,allow any column to be the tallest,require only a single extra div of markup, andrequire very simple CSS, with minimal hacks patches. On the shoulders of giants#section1 The technique presented here is inspired by Alex Robinson’s brilliant One True Layout. Another lead came from Eric Meyer’s adaptation that uses positioning to mix multiple unit types. Enough talk—let’s see some code#section2 The required HTML is intuitive and elegant. That’s it. The stylesheet is almost as simple. Take a look and marvel at the elegance. Www.myspace.com/b_e_n. Clearing a float container without source markup. (This clearing technique was developed by Tony Aslett, of csscreator.com.
The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag.
This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. So in effect, such a cleared box cannot be at the same horizontal level as a preceding float. <div><! WordPress Style Browser.