How to make CSS float left not bend around when browser width is shrunk

Question

I have 2 div boxes. It's all working fine but when the browser is shrunk to less than 800 pixels or so, the second div moves underneath the first div. How can I force it to always stay to the right of it?

#testbox1 {
background-color: #0000ff;
min-width: 300px;
width: 30%;
height: 200px;
position: relative;
float: left;
}

#testbox2 {
background-color: #00ffff;
width: 500px;
height: 200px;
position: relative;
float: left;
}

Answer 1

Give the parent element a min-width: 800px;.