CODEWITHSUNDEEP
htmlcss
ColonelHedgehog
ColonelHedgehog

Reputation: 460

Evenly spaced divs with fixed wrapper?

I've been trying to make an interactive navbar that sticks to the top of the page. Here is what I have:

<style>
.sticky-nav-wrapper > div
  {
    color: #000000;
    display: inline-block;
    display: -moz-inline-box;
    *display: inline;
    zoom: 1;
    width: 33%;
    text-align: center;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
  }

</style>
<div class="sticky-nav-wrapper">
  <div>TEST</div><div>TEST2</div><div>TEST3</div>
</div>

This will create a block that looks like this:

enter image description here

However, if I try to make it so the sticky-nav-wrapper's position fixed, then it gets all jumbled onto one side:

http://gyazo.com/7a5cac8813f04836d20c72f42683e9a2.png

So, how can I keep it evenly spaced, yet fixed to the top?

Upvotes: 1

Views: 50

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10260

You generally have the right idea but you are placing them in the wrong places. You want to apply your fixed position to the parent itself and then the display inline to the children. That will line them up instead of being stacked on top of each other. However, unless you need divs for the children, I would use a ul for the menu in the sticky wrapper and li for each of the children. I've added a demo with both cases. Yours (fixed) and mine (with UL LIs )

See DEMO

.sticky-nav-wrapper2 {
   color: #000000;
   width: 100%;
   text-align: center;
   z-index: 50;
   background: #ccc;
   position:fixed;
   top:35px; /* Remove this*/    
}
.sticky-nav-wrapper2 ul li{
   list-style-type: none;
   width: 33.3%;
   float: left;
}

Upvotes: 1

Related Questions