Solved

css only expandable and contractable divs

Posted on 2009-07-16
2
359 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

803 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