width of floated div pushed down

Question

I have floated two divs left but the div on the right has a huge text(without br s) and it is pushed down

what should i do in the css such that to make sure the right div does not push down

I had tried giving it a width but width does not take the rest of the screen as different computers have different screen sizes...

http://jsfiddle.net/4ZGmj/

thanks

Pradyut

Answer 1

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

Answer 2

You have to give the second div a width. Otherwise it will just take whatever room it can get (because of the large text without br's).
And when it gets too wide it won't float anymore.
So if you add something like width:400px; it will float like you want it to.

Answer 3

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

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

Answer 4

I have updated your fiddle again, this time the left column is a static width and the right is fluid. 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 test this in IE though.

Regards, Simon

Answer 5

I have updated your fiddle for you. You need to explicitly set a width for both divs, because with your large body of text the div will scale to as wide as it needs to be.

Updated CSS looks like 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'll notice that clear:none; has been added to both divs, this means the div will not be pushed to the next line.

Regards, Simon