Pradyut Bhattacharya
Pradyut Bhattacharya

Reputation: 5748

float right and left with fixed position using css

I am having three div. The one on the middle i am having is with margin:auto so its displayed in the middle.

Now a div is to be floated on left of the page and one to the right while keeping the middle div in the middle.

Now I can achieve this using the example here

But I want the position of the both the left and right divs to be fixed with -

 position:fixed;

which is creating the problem.

Should I have to use a child position:fixed div inside the right and the left floated divs?

Upvotes: 2

Views: 2727

Answers (2)

Trke Rap
Trke Rap

Reputation: 93

you shouldn't do the height 100% try it auto or add how much px you want i done that

   height: auto;
    position:fixed;

https://jsfiddle.net/tny0t6ps/4/

Upvotes: 0

Xposedbones
Xposedbones

Reputation: 597

element with position:fixed don't respect floating. You can replace your float:left; with left:0px; and your float:right with right:0px;

https://jsfiddle.net/tny0t6ps/3/

.aleft {

    left:0px;
    width:100px;
    margin-right: 5px;
    background-color: #e3e3e3;
    padding:5px;
    height: 100%;
    position:fixed;
}

.aright {
   width:100px;
    background-color: #e3e3e3;
    padding:5px;
    position:fixed;
    right:0px
}

Upvotes: 2

Related Questions