The width of the floating div moves down

Question

I placed two divs left , but the div on the right has huge text (without br s) and it is pressed down

what should I do in css to make sure the right div is not clicking

I tried to give it a width, but the width does not occupy the rest of the screen, since different computers have different screen sizes ...

http://jsfiddle.net/4ZGmj/

thanks

Pradyut

Answer 1

you need to set width for at least one element. Example: http://jsfiddle.net/4ZGmj/6/

Answer 2

You should give the second div a width. Otherwise, he will just take any room he can get (due to the large text without br's).
And when it gets too wide, it will no longer swim.
Therefore, if you add something like width:400px; He will swim the way you want.

Answer 3

It looks like you are trying to create 2 Column Fluid Layout. Can I suggest the following example?

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

Answer 4

I updated my violin again, this time the left column is the static width, and the right is the liquid. CSS is as follows:

 .ldiv { float: left; clear:none; border-style:solid; border-color:red; width:200px; } .mid_div { padding: 10px; float:none; clear:none; margin:0 0 0 220px; width:auto; } 

You might want to check this out in IE.

Regards, Simon

Answer 5

I updated your violin for you. You need to explicitly set the width for both divs, because with your large text, the div will scale as much as necessary.

Updated CSS is as follows:

 .ldiv { float: left; clear:none; border-style:solid; border-color:red; width:300px; margin:0 20px 0 0; } .mid_div { padding: 10px; float:left; clear:none; width:300px; } 

You will notice that clear: none; was added to both divs, this means that the div will not be wrapped to the next line.

Regards, Simon