0

I'm trying to use both fixed-width and stretchy CSS content, similar to what is seen on Google Calendar. I assumed this would be easily achievable using min-width and max-width, however I am having trouble with sub-elements which are simply sticking to their minimum widths rather than stretching to the maximum.

A demo can be seen here.

AaronDS
  • 851
  • 2
  • 13
  • 31

3 Answers3

1

You actually don't need setting min/max width anyway.

http://jsfiddle.net/UyZ6T/1/

The problem was basically the float: left; on the stretch-1. You only need that on the fixed size part. It basically means: 'I am on the left now, and everything else takes the space to the right'. A div with float property tries to take as little space as possible, so that the rest can stretch.

Slomo
  • 1,224
  • 8
  • 11
  • would you also know how to stop the background colour of the sub-content from behaving strangely? It seems to span the entire width of the container. http://jsfiddle.net/CassS/ – AaronDS Jul 29 '12 at 11:20
  • 1
    Right, haven't realized that. Seems like `overflow: auto;` on the stretch-1 does it. Unfortunately I can't really explain why. Maybe you have to test it with different browsers (http://jsfiddle.net/PJDCP/). By the way, if you want that sub-content only takes as much space as it needs, change it from `
    ` to ``.
     – Slomo Jul 29 '12 at 12:29
  • It seems to work OK in all up to date browsers, although I'll have to test it more later on. Thanks again! – AaronDS Jul 29 '12 at 14:12
1

remove float:left from #stretch-1. fiddle

d.k
  • 4,234
  • 2
  • 26
  • 38
0

Your're essentially trying to create a fluid layout that contains fixed width elements, you need to set percentage widths on all of parent elements in order toget this to work like google calendar - change your css to the following

#container {
max-width:1280px;
min-width:260px;
    width:90%;
height:200px;
margin:auto;
background:#000;
}

#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}

#stretch-1 {
min-width:60px;
    width:20%;
height:200px;
float:left;
background:#c44d58;
}

#sub-content {
width:100%;
height:20px;
background:#4788ef;
}

​

bigmadwolf
  • 3,419
  • 3
  • 30
  • 44
  • That fiddle doesn't work as intended... The pink area should fill the remaining black space while still sitting next to the green box. – AaronDS Jul 28 '12 at 17:48
  • I see now that you need to omit the float left and set the width to auto if you don't want to set a specific width for the fluid box and have it take up all of that space - updated fiddle -[link](http://jsfiddle.net/yzPCN/4/) – bigmadwolf Jul 28 '12 at 22:38