使用css固定位置左右浮动

Question

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?

Answer 1

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
}

Answer 2

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/