CODEWITHSUNDEEP
javascripthtmlcss
Prime
Prime

Reputation: 3625

How to make div position fixed without floating

I want to fix the left div using position:fixed. So that when I scroll the page only right div should move, I tried using position:fixed to left div but it was floating over right div content. How to make left div fix to the page without floating over right div ?

CSS :

#main{width:100%;display:table;table-layout:fixed;border:1px solid red;position:relative; }
ul{list-style:none;padding:0;margin:0;overflow-y:scroll;height:100%;}
#left {               
    display: table-cell;
    width:250px; 
    // min-width:100px;
    vertical-align:middle; 
    text-align:left;
    background:red;
    }

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
}

Fiddle :

http://jsfiddle.net/0k698ga2/1/

Right div must have width:100% becasue, some pages left div was hidden, to cover the page right div must have 100%.

Upvotes: 0

Views: 2078

Answers (5)

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

Add a class to #left for hidden status.

/* Left panel visible */
#right {
    box-sizing: border-box;
    width: 100%;
    padding-left: 250px;
}

/* Left panel hidden */
#left.hidden {
    display: none;
}
#left.hidden + #right {
    padding-left: 0;
}

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

In your Javascript, check if the #left div is visible or not.

var leftDiv = document.querySelector("#left"),
    rightDiv = document.querySelector("#right");
if(leftDiv.getBoundingClientRect().width === 0 && leftDiv.getBoundingClientRect().height === 0) {
     rightDiv.classList.add("fullWidth");
} else {
     rightDiv.classList.remove("fullWidth");
}

Now by default in your CSS:

#right {
   width: calc(100% - 250px);
}

For fullWidth:

#right.fullWidth {
   width: 100%;
}

DEMO

Upvotes: 0

aleju
aleju

Reputation: 2386

Essentially you set position:fixed with a fixed width (i.e. here width:250px;) on the left div and add the width as a margin to the right div, i.e. margin-left:250px;.
See jsfiddle or directly the css code:

#main{width:100%;display:table;border:1px solid red;position:relative; }
ul{list-style:none;padding:0;margin:0;overflow-y:scroll;height:100%;}
#left {               
    width:250px; 
    // min-width:100px;
    vertical-align:middle; 
    text-align:left;
    background:red;
    position:fixed;
}

#right {               
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
    margin-left:250px;
}

Upvotes: 0

user1832200
user1832200

Reputation:

Try this: http://jsfiddle.net/0k698ga2/2/

I used this piece of CSS. Hope it helps.

#main{
    width:100%;
    display:table;
    //table-layout:fixed;
    border:1px solid red;
    position:relative; 
}
ul{
    list-style:none;
    padding:0;margin:0;
//    overflow-y:scroll;
    height:100%;
}
#left {               
    display: table-cell;
    width:250px; 
    position:fixed;
    // min-width:100px;
    vertical-align:middle; 
    text-align:left;
    background:red;
}

.leftContainer {
    position:relative;
    width:250px;
}

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    text-align:left;
    background-color:#ccc;
}

Upvotes: 2

Simon H
Simon H

Reputation: 1745

Try putting the following, simply add the class full-width to the body tag in order to hide the left panel and make the right full width.

.full-width #left {
    display: none;
}

.full-width #right {
    width: 100%;
}

#left {
    width: 25%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: red;
}

#right {
    width: 75%;
    position: relative;
    left: 25%;
}

Upvotes: 0

Related Questions