The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The second one is pretty simple because it uses a background image for the columns. You can do this by making and image that has the correct percentage of colour to what you need. e.g. I have made an image that is 2600px wide (to cover all monitors) and then coloured 25% of it (650px) with a different colour for the left column. The image is then place at a position of 25% 0 in the background of the outer so that it always reveals only 25%.

I'm using the percentage one, but I need the column to float to the right, not to the left... since thats the content Im gonna toogle. But I cannot make it 75% percent. I changed the 33.333 and 33.222 % to 75.333 and 75.222 but didnt work. What else do I need to change?

Well use example 2 then using the background image method as it already has a 75&#37; right float which can easily be toggled off.

If you toggle it off by applying a class to the body then you can set the background to a solid colour instead of an image to hide the column illusion and set the left float to 100% all by targetting from the class you add to the body.

You will see 3 images:
1. search-results.png - which is the normal page
2. search-more.png - which is the page showing more info of X result
3. fullscreen - which is the left and right column toogled to the top

First of all you have a scrollbar at the bottom of the viewport for the left column which suggests that the left column has to scroll by itself and will be independent of the right column completely. It also suggests that vertical scrollbars will also appear on the left column should they be required which in turn suggests that the right column would have to be the same and scroll independently of the left.

It looks like you are trying to reproduce frame type layout. I have an experimental layout here but I wouldn't recommend using it unless you test it thoroughly first. It uses absolute positioning for good browsers and a slightly more complicated routine for IE.

However I would treat it with care as scrollbar manipulation like this can be unstable and you can lose the vertical scrollbars in some situations.

I would recommend that you don't try and reproduce the frame type layout but rather let that left column scrollbar sit just under the content and let the body as usual handle the normal scrolling at other times. That would mean you could use a floated layout instead (although it won't look the same as your pictures).

As I said before this is an experimental layout so make sure you "stress test" it before you commit to using it. Try it with the kind of data you require to make sure it will do the job you want.

To change the height of the footer and header you have to change things twice because IE and Firefox have different things. For firefox you adjust the bottom co-ordinates of the absolute elements so that everything fits where you want it. For ie6 we use padding on the top and the bottom of the html element which makes the space for the header and the footer and therefor emust match their sizes. This allows us to still use 100&#37; height on the body in IE6.

I don't really have time to go in depth today but the scrollbar on the left isn't working because you have used a negative z-index on #side which is stopping it working. It should be a positive z-index.

When you collapse the header you have to take into account that ie6 and ie5 are getting different things ans so you can't change them through javascript because you are changng things that Ie6 doesn't need changed.

You would be better of using another class in the html element and another in the body element (for ie5) and then let the css and conditional comments handle the presentation changes.

I'm afraid that there will be little you can do to stop the content in the header from being hidden at smaller screen sizes because it won't implement a scrollbar. This is the drawback of this method and you should ensure that header and footer content is visible at reasonably small sizes.

What exactly are you trying to do as it will make a difference as to how to approach this?

Do you simply want 2 columns in the middle section now or are you trying to implement 3 toggle columns. Your original idea was just one column that split into 2 columns when toggled so I need to understand exactly what your approach is now.

Whether it will be possible or not is another question

The more explicit you can be then the better idea will have in how to approach this.

The left column colour has to be an image using the techniques I outlined previously.

Be aware that 3 fluid columns will have rounding issues so you can't be pixel perfect and you will have to allow for that with your design.

Regarding number 4 above then this doesn't sound possible because the column will depend on content height and could stretch for miles and seems to indicate to me that you are thinking along some other lines maybe.

Long Time No Bother

You will see a zip file that contains all the HTMLs, CSS, and images. If you download it, and open:

1. QUICKVIEW.HTML - check the Alarms, Trouble Tickets, SLA Metrics and Orders. You will notice the is a gap between the gray bar and the border or end of the column. I need all 3 columns to with 0 margin and padding... no gaps. Any suggestion? BTW, I'm using your liquid 3 cols layout.

2. ALARMS.HTML - click the link under TT ID (ID 123456789), the right pane will appaer. The problem is that IE6 is not showing the SCROLLBAR in that Right Pane. FF and Opera do show the scrollbar. Any suggestion?