Question

I have 2 divs, one needs to be a fixed width, the other responsive to the users device. Currently when below a certain width the floated divs jump onto separate lines. Is there a way to…

1) Make them both 100% height of the body

2) Stay on the same lines so the right side div can shrink in width while the left side div retains it’s min/max width?

Also the right div at 70% never fills up the full 70% of space available.

I realise what I’m trying to do is a bit of a oxymoron but can’t think of a way around it.

http://jsfiddle.net/establish/fxQfv/

HTML

<article>
</article>

<section>
</section>

CSS

article  { 
background: blue;
float: left;
height: 100px;
width: 30%;
min-width: 200px;
max-width: 200px;
}

section  { 
background: red;
float: left;
height: 100px;
width: 70%;
}

​
​

Answer 1

http://jsfiddle.net/fxQfv/3/

article  { 
    background: blue;
    height: 100px;
    width: 30%;
    float:left;
    min-width: 200px;
    max-width: 200px;
}

section  { 
    background: red;
    height: 100px;
    width: auto;
}

For your height problem take a look at this article: http://www.alistapart.com/articles/fauxcolumns/
​