I’m in the process of reworking my website and I’m trying to create a CSS template that works like this - the only bits I want to keep static width are the left menu sidebar (pink) and the right side content column (yellow, nested right inside the content containers).
Should be simple, right? And it is - I can get it looking exactly right. When viewed in Firefox…
IE does all sorts of bloody nonsense with the content - anything I drop into one of the columns forces other items on the page downwards, so although it’s displayed as contained within its column, it’s affecting things outside - a bit like this - instead of stacking up at the top of their columns, the pieces of content are stacking below others inside other divs.
So… am I chasing a rainbow here? Is this possible?
This is not a commercial plug, but a pointer to an example (sort of) …
take a look at www.chocolatefountainfactory.co.uk - from what your pic looks like, it achieves (as intended) the style you want.
Rip off the CSS all you like - but it is not all my code and is designed for Joomla elements, but you should be able to get some ideas. And it does work in IE (took me a while to make that work properly, actually, so I feel your pain).
And get the Web Developer extension for Firefox - it is really useful for seeing the CSS elements.
The three column fluid layout is what’s known as the holy grail of css.
The way I managed it, after trying various methods, is to have the left and right columns a fixed width, and the centre column to have a left-margin and a right-margin that cleared those side columns. There was a bit more to it than that to make it work, but essentially that was the key.
You’re asking for a slight variation on that so might need some other tweaks, but it ought to be possible. I suggest you Google “CSS 3 column layout” and seewhatmany have done before you.
What is different in my case is that menu bar - so what mine actually should be is a two-column header/fluid/fixed/footer layout, within the right(fluid) column of another headerless/footerless fixed/fluid two column layout.
Makes me wish tables weren’t going out of fashion.
What kind of Doctype have you set? If it’s Transitional, it may go all screwy in IE. Try using Strict and see if that helps.
Oh, and you might want to try out this javascript fix I discovered recently, which makes most of the frustrating quirks of earlier versions of IE go away.
It is Transitional - I’ll try strict this evening.
I’m hoping to get away with no javascript at all, if I can - there was a time when lots of people simply kept JS turned off and I expect a few of them are still out there (although they might still be using IE4 or something, in which case there will be plenty of other reasons for my site not to work for them)
If you’re willing to forego having a separate container for the non-sidebar stuff, I think you can adapt a standard three-column layout to your needs in the following way:
By way of explanation… the only real reason I’m being so damn awkward is the site logo - which I really like, but it’s essentially square - and makes for an unacceptably deep top banner if I put it up there in the header (as can be seen on the current version of the site, which incidentally is table-based and static width).
My solution (if it can be called that) is to divorce the logo from the banner title and move it over to the left, where it can more comfortably fit above the menu column - like this.
It’s just dividing up that main content area into two columns - one fluid and one static, that’s causing me the big headaches right now.
It may actually be that I’m still thinking of all this the wrong way. The header and sidebar column are the same colour and are borderless. Maybe I should just go for a standard three column layout, then absolutely (and independently) position the logo over the top of part of the header and part of the left column.
Yeah, that could work, too. I try to avoid absolute positioning when at all possible, though. YMMV.
If you want an example which I think can be made to work for your site, this is my website. It uses a pretty non-standard three-column layout: the left sidebar is part of the main content page, the right sidebar is actually part of the header, for what I think were “semantic” reasons at the time. Regardless, you can pretty easily get it to look like you want by playing with the margins of the two sidebars (try a positive #infobox and #sidebar). Negative margins are your friend At the moment, the main content will flow under the right sidebar if there’s enough of it, but that can be changed by setting a right-margin for that div.
I’m getting somewhere now - I found this example: http://www.pmob.co.uk/temp/3colfixedtest_newfluidheader1.htm
-Which, without the main header, fits my requirements pretty closely - and I’ve managed to make a workable layout (although it’s not as resistant to resizing as I would like - and when I try to remedy this by setting minimum widths, some bits just disappear altogether in IE.
Anyway, I’m now onto the tricky task of getting images to float right or left within my columns, so that I can write about them in text that flows around the side - this works OK…
Except… I want to be able to chop it into distinct vertical blocks - so that text alongside image number 2 could never end up flowing up to be alongside image number 1. I can do this by dropping the image and text into its own sub-container div - and that works fine…
Except in IE, where the container doesn’t stretch to fit its contents, so it’s necessary to insert a ‘clearboth’ object as the last thing in the container, which does force it to stretch to fit…
Except that fucking IE now doesn’t render the text when the page loads - oh, it’s there - because I can drag my mouse over it and make it appear - and it stays visible after that - until the page is loaded again.
You know, until I started this project, I had always known that “IE isn’t a standards-compliant browser”, but it had never really hit home exactly what that means.
All those lovely CSS pages out there, all with little IE-specific hacks in them to coerce IE into doing things properly. It’s not a good thing at all.
But the div is necessary anyway - it’s the visible background of the column itself - IE won’t make it grow past the end of the text, unless there’s more text there to force it.
Which version of IE are you testing it in? This sounds like a very old version to me. Sometimes the way to fix a problem like this is just to adjust one div by one pixel, as crazy as that sounds.
There are considerable hacks in the CSS that look more like patch here, patch there, rather than a designed approach. The HTML contains quite a bit of code that belongs in the CSS.
At the moment, the main content will flow under the right sidebar if there’s enough of it, but that can be changed by setting a right-margin for that div.
