Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Two CSS questions in a (special) three column layout!
I’m working on a site with a 3 column (#left, #centre, #right) layout in a #wrapper. See this page
The body has a tiled background image. #left has (only) a background image (with for now some testing text to give some height!) and #centre and #right has content (nav, article).
The #wrapper has a width of 2000px. Because I want to have the opportunity to scroll to the right so you can see the whole background image.
1. What can I do with CSS so that all columns get an equal height? Yes, to give them equal height, lets say 2000px. But what if the content of #right will exceed the 2000px? Faux Columns or Clearfix doesn’t work here (I think!). Any tips or hints?
2. The width (2000px) of #wrapper does give a horizontal scrollbar in Safari, but none in others. What must I do in CSS to give all browsers a horizontal scrollbar?
Thanks for helping me out on this one!
Offline
Re: Two CSS questions in a (special) three column layout!
Setting your wrapper width to 2000px seems a bit silly. Background images are just that – images that sit in the background and don’t affect the structure of the site.
My suggestion would be to set your 2000px wide image as the background for the body not the wrapper. This way, anyone can expand their browser (if their screen is big enough) to see the image.
For height, why not use min-height:2000px?
Lots of scrolling of course.
If you really do want to set the wrapper to 2000px wide, then you’ll need a clearing element after the last floated div. This will make the horizontal scroll appear. For example, place <div style=“clear: both”></div> just before the closing </div> for the #wrapper.
Offline
Re: Two CSS questions in a (special) three column layout!
Yeah as ricetxp said you need to clear them, and there is multiple ways to do this. One is just use #wrapper {overflow:hidden;} that seems a little hackish way, but it works with every browser.
Also, remember that min-height works only with fully CSS 2 compatible browsers, so in example old IE nor Safaris won’t understand that at all. But that can be fixed by setting height for them.
And, yeah you never shouldn’t set that large width, 2000 pixels is just nuts. That is just too big for almost every screen’s resolution. Background image should work with common resolutions. Some oldies still use 800px/860px with screen, but almost everyone got 1024+ to spare.
Also, if your goal is to do some tasty background for the columns, i would go with not setting min-height and instead using background image triks. Like setting tasty three column background to the wrapper that makes it look like that the columns are equal.
Last edited by Gocom (2008-04-04 12:21:00)
Offline
Re: Two CSS questions in a (special) three column layout!
First of all, thanks to you both!
This is what I did to accomplish what I wanted > http://www.nathaliebaartman.nl/txp/speellijst
The #wrapper got overflow:hidden … so there will appear a horizontal scrollbar in all browsers. I didn’t know this one and I don’t understand it (yet), but for now I’ll have it … :) The scrollbar is important because there has to be a opportunity to spot the background-image of Nathalie without the columns in front of it. And that’s why the #wrapper must also have a width of 2000px.
The #wrapper did also get a background-image … it’s a 126Kb gif … but it does the trick > a screendump of the psd file!
I did have to put a ‘ ’ character into #left … because with no content there is no background-image. But maybe there is an alternative way to deal with this one too. Thanks in advance … :)
[edit]
With a height: 1px on the #left I can do without ‘ …
Last edited by RedFox (2008-07-01 18:42:45)
Offline