CODEWITHSUNDEEP
htmlcss
RdlP
RdlP

Reputation: 1396

Place div near fixed div

I want to place a div fixed on the left and near I want to place other div.

Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.

Now I have the following code:

<div id="container">
  <div id=fixed-menu>
  </div>
  <div id="content">
  </div>
</div>

#fixed-menu {
     position:fixed;
     background: #fff;
     padding: 10px;
     top:60px;
     left: 10px;
     width:300px;
     max-width: 300px;
 }

#content {
    background: #fff;
    padding-top: 10px;
}

In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.

If I use margin-left in #content the error is solved, but I don't want use that, any other solution?

Thanks.

Upvotes: 0

Views: 91

Answers (1)

Brodie
Brodie

Reputation: 8757

One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.

Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.

If you look at this fiddle: http://jsfiddle.net/f38aj/

css:

#container {
    position: relative;
    height: 700px;
    padding: 0 0 0 320px;
}

#fixed-menu {
     position: fixed;
     background: red;
     padding: 10px;
     top:8px;
     left: 8px;
     width: 300px;
     max-width: 300px;
 }

#content {
    background: blue;
    padding-top: 10px;
}

If you notice we create padding in the container, where we end up overlaying the div#container object.

we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.

A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.

hope that helps.

Upvotes: 1

Related Questions