Solved

css only expandable and contractable divs

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I make a css class read only with jquery? 2 37
Adjust the position 3 49
Not showing page correctly 3 31
Remove third quote mark from widget 6 12
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

867 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

21 Experts available now in Live!

Get 1:1 Help Now