Solved

css only expandable and contractable divs

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now