Change the width of a <div> when clicked or hovered without JavaSctipt?
===

I'm using a windowed layout, and I'd like for the following two functions:

* When a window is clicked, it gets smaller so as to not take up space.

* When a small window is hovered over, its width expands so that its contents take precedence.  

This is for a simple page with two <div>s. I tried variations of the following concept, and it doesn't seem to do it:

Suppose `<div id="window1">` and `<div id="window2">`

    #window1 {width: 30px;}
    #window1:hover{width: 100px;}

Basically the page has a little menu at the bottom left of the screen (`fixed`) that I would like to get out of the way for people with smaller resolutions (1024 and under) because it will get in the way of the text. 
