Two DIV aside with no break on small screen and flexible width - html

Question

I want 2 divs aside and they have to stay aside. If the screen is too small I don't want the two divs under each other. The first DIV has a fixed width of 400px, the second DIV can be between 150px and infinite. The height is both fixed at 300px.
How can I do that? I already tried with float, but that causes the DIVs to break if the screen is too small.
Making a wrapper-div around with a large width would work, but looks ugly and buggy.

Answer 1

I'd do something like the below;
HTML
<div id="containerdiv">
<div id="fixeddiv"> </div>
<div id="elasticdiv">
<div id="div2000"> </div>
</div>
</div>
CSS
#containerdiv{
min-width:550px;
}
#fixeddiv{
height:300px;
width:400px;
background:red;
float:left;
}
#elasticdiv{
height:300px;
overflow:hidden;
min-width:150px;
background:blue;
}
#div2000{
width:2000px;
background:yellow;
float:left;
}
How Divs will appear

Answer 2

Create a wrapper div and give it display: table-row; min-width: 550px;, and then make the divs inside it have display: table-cell;. Something like this:
.container
{
display: table-row;
min-width: 550px;
}
.container > div
{
display: table-cell;
height: 300px
}
.container > div:first-child
{
width: 400px;
}
.container > div:last-child
{
min-width: 150px;
}
And then this for the HTML:
<div class="container>
<div>I have 400px width.</div>
<div>I have at least 150px width, and am next to the other guy.</div>
</div>
Here, have a Fiddle