CODEWITHSUNDEEP
csslayouthtml
cola
cola

Reputation: 12466

CSS float: left layout moves

This is the css file for two division one at left and one at right=>

div#id_div_loadwhat {
    float: left;
    width: 74%;
    padding-right: 5px;
}

div#id_div_rightside {
    float: left;    
    width: 25%;
    height: 100%;
    border-left:solid thin #ff9900;
    margin-right: 0;
    padding-right: 0;
}

When there is no text or data in left side division the right side division moves to the left.

But i want to right side division at it's right side position for all time.

How can i do this ?

Upvotes: 0

Views: 738

Answers (3)

Oseer
Oseer

Reputation: 740

Give the right side div float:none and see if that works.

Upvotes: 0

David Tran
David Tran

Reputation: 10606

"When there is no text or data in left side division " --> Just don't let the "left side division" empty, just put a " " inside it.

If you just want to keep the left div "absolutely empty" as it is, just apply css rule "min-height" to it with a small value:

div#id_div_loadwhat {
    float: left;
    width: 74%;
    padding-right: 5px;
    min-height:18px;
}

Upvotes: 1

Fahd Hamad Al-Abdulqader
Fahd Hamad Al-Abdulqader

Reputation: 71

what you need is to specify the height on the left div.. either with a min-height or height

this will solve your problem..

and one more thing, the padding-right should be 1% not in 5px because it will miss your style when the resolution is small.

Upvotes: 1

Related Questions