CODEWITHSUNDEEP
htmlcss
Pradyut Bhattacharya
Pradyut Bhattacharya

Reputation: 5748

width of floated div pushed down

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

Upvotes: 4

Views: 2837

Answers (5)

SimonDowdles
SimonDowdles

Reputation: 2046

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

Upvotes: 1

apiguy
apiguy

Reputation: 5362

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/

Upvotes: 1

SimonDowdles
SimonDowdles

Reputation: 2046

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

Upvotes: 0

Sotiris
Sotiris

Reputation: 40096

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

Upvotes: 3

gnur
gnur

Reputation: 4733

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.

Upvotes: 1

Related Questions