Solved

css only expandable and contractable divs

Posted on 2009-07-16
2
360 Views
Last Modified: 2012-06-21
Im trying to make a page something similar to igoogle.com in which the divs which make up 'widgets' in each column are expandable and contractable as you move the browser window. I need this backwards compatible to IE 6 and supporting the modern browsers too of course. I'm not sure that such a thing is actually possible in IE6 however, at least in css only. Anyone know of a way to do this?

I found this which is a fixed central column and expanding/contracting sides around it: http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm , but I need all the divs to be contracting as I move the window size.

Thanks for any help or tips!
Matt
0
Comment
Question by:MatthewP
2 Comments
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 24871169
This should be achievable by using percentage widths for the main structure of your page and not declaring the width for the individual widgets.  As a matter of fact, I won't even take credit and give you the code!!  Here is a link to a great resource: http://matthewjamestaylor.com/blog/perfect-3-column.htm!

I hope this helps, there a million ways to make this work but this is one of the easiest to understand with all the code available to you and a pretty good explanation!
0
 
LVL 6

Author Closing Comment

by:MatthewP
ID: 31604285
Excellent answer, this is an invaluable link and actually covered everything else I wasn't sure of in addition, many thanks!

Matt
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question