CODEWITHSUNDEEP
htmlcsswidthstretch
AaronDS
AaronDS

Reputation: 861

How to use both fixed and stretchy CSS content

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.

Upvotes: 0

Views: 117

Answers (3)

bigmadwolf
bigmadwolf

Reputation: 3519

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;
}

​

Upvotes: 0

d.k
d.k

Reputation: 4456

remove float:left from #stretch-1. fiddle

Upvotes: 1

Slomo
Slomo

Reputation: 1234

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.

Upvotes: 1

Related Questions