How do I make a div resizable in the browser?

Question

I have 2 divs...each are float left, and each have a "width".

When I resize my browser, the right div goes down to the bottom of the left div. Why? I'd like it so that during resize, it stays there.

Answer 1

There are a lot of solutions to this. A solution that preserves your existing float layout:

Enclose those two div's in a parent div where the width is set wide enough to hold both those divs.

They are "wrapping" because you marked them as floated elements and when their parent container becomes too small to put them on the same "line", the second one pops below, just like text, etc.

Answer 2

You are likely making the browser width too small for both floated divs to be side by side.

One way to prevent this is to wrap them in a larger semantic div that has a fixed or min-width. Or, simply give the body itself a min-width. Min-width is not supported in IE 6, just set the width for IE6 and it will treat it as min-width.

Answer 3

Give Width as "50%"