?
Solved

css only expandable and contractable divs

Posted on 2009-07-16
2
Medium Priority
?
365 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 16

Accepted Solution

by:
s8web earned 2000 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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…
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.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month14 days, 15 hours left to enroll

771 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