CODEWITHSUNDEEP
htmlcsscss-positionfixed
KenB
KenB

Reputation: 35

Keeping a fixed div alligned while resizing

I want to make a menu to the left and to the right of a list. The menu's have to be fixed, and I want them to always be 10 px of the list, even when I am resizing.

I made the list 'position: relative' and I would like the menu's to be placed relative to the list.

As you can see, I would like it so the orange buttons are the same distance from the list as the blue buttons, even when I resize it.

I tried to use margins, left, right, padding... but nothing seems to work.

Here is some css I used:

With this css, it looks like this: 

.navblue {
        float: left;
        position: fixed;
    }

    .navorange {
       float: right;
       position: fixed;
    }


    .navblue ul {
        list-style: none;
        padding-left: 0;
    }

    .navorange ul {
        list-style: none;
        padding-left: 0;
    }

    #biglist {
        background-color: #e3e3e3;
        width: 80%;
        padding: 20px;
        border-radius: 5px;
        color: #000;
        border-color: transparent;
        margin-left: auto;
        margin-right: auto;
    }

Thank you very much if you can help.

Upvotes: 3

Views: 13290

Answers (2)

DriftingSteps
DriftingSteps

Reputation: 526

Maybe this is what you're looking for? http://jsfiddle.net/myjruLvr/9/

I added an extra parent <div> outside the icons and the main content, and then gave it padding equal to the width of the icons + 10px margin. And instead of position: fixed;, I've used position: absolute;.

Alternatively, you can also use the float property for the icons.
http://jsfiddle.net/myjruLvr/11/

That's a rough example. The icons are floated on their respective sides and the centered <div> will have margins on either sides equal to the width of the icons + 10px.

EDIT:
It seems you're asking for something like a sticky menu, but made purely out of CSS. Sadly position:fixed positions an element relative to the browser viewport, regardless of how it's parent is positioned, and I guess that's pretty much the reason why we have several jquery alternatives for this.

Upvotes: 3

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

You have to add the fixed position units. Update your CSS like below.

 .navblue {
    position: fixed;
    left:0;
    top:0;
}

.navorange {
   position: fixed;
   top:0;
   right:0;
}

EDIT

Based on your comments below, Here is updated CSS.

#container {
width: 100%;
padding-left:70px;
padding-right:70px;
box-sizing:border-box;
}

.navblue {
position: fixed;
left:0px;
top:0;
}

.navorange {
position: fixed;
top:0;
right:0px;
}

.navblue ul {
list-style: none;
padding-left: 0;
}

.navblue a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background:#017da1;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius: 50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #017da1;
-webkit-transition: all ease-in-out .3s;
-webkit-background-clip: padding-box;
}

.navorange a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background: #e9500c;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius:50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #e9500c;
}
.navorange ul {
list-style: none;
padding-left: 0;
}

#biglist {    
height: 500px;
background-color: #e3e3e3;
width:100%;
border-radius: 5px;
color: #000;
border-color: transparent;
box-sizing:border-box;
}

DEMO

Upvotes: 2

Related Questions