CODEWITHSUNDEEP
asp.nethtmlcss
Rama Subba Reddy M
Rama Subba Reddy M

Reputation: 687

How to display header content without overlapping with non fixed content

I have header menu div which is fixed when we scroll down and next to that i have another div which will be used to display some text which is fixed when we scroll down. Next i have non fixed content div. My problem is header menu div(fixed) is overlapping with another div(fixed) and both fixed div's are overlapping by non-fixed div content. How can i resolve this overlapping and how can i display the data in order :1st fixed div and 2nd fixed div then non fixed div content. Please suggest me your valuable solution.

FYI: i have tried with "clear:both" also.

The following is the sample content

<div id="dvHeaderMenu" style="position:fixed">
    <ul>
        <li>
            Test</li>

    </ul>

</div> 

  <div class="clear">
</div>


<div id="dvanotherContentwithFixed" style="position:fixed">
Intel to Introduce Affordable “Haswell” Microprocessors in September.
</div> 

  <div class="clear">
</div>
<div id="NonFixedContent">
Intel Corp. intends to introduce affordable microprocessors based on Haswell micro-architecture this September, if an extract from a presumably Intel’s document is to be believed. The world’s No. 1 maker of chips will introduce a number of new microprocessors that will belong to Core i3 and Pentium product families.

In case the document is up to date and plans of Intel’s are not going to change, then on September 1, 2013, the world’s largest chipmaker will introduce Core i7-4771, Core i5-4440, Core i5-4440S, Core i3-4340, Core i3-4330, Core i3-4330T, Core i3-4130, Core i3-4130T, Pentium G3430, Pentium G3420, Pentium G3220, Pentium G3420T as well as Pentium G3220T based on Haswell micro-architecture. The company will also add new Core i5-3340, Core i5-3340S, Celeron G1630, Celeron G1620 and Celeron G1620T based on Ivy Bridge micro-architecture.

It is interesting to note that the aforementioned microprocessors will be announced on September 1, but will only become available on Asian markets starting that date. In Europe, Middle-East, Africa, North America and Latin America the new chips will be available only starting from September 29, 2013.



The emergence of new affordable microprocessors based on Intel Haswell micro-architecture will mark the beginning of the end of previous-generation products, including those based on Sandy Bridge and Ivy Bridge designs. As Intel widens availability of new-generation microprocessors, it will have to shrink shipments of earlier central processing units.

Intel did not comment on the news-story.
</div>

Upvotes: 0

Views: 201

Answers (1)

Scadoodles
Scadoodles

Reputation: 151

In order to effectively use position: fixed you should accompany it with positioning styles like top and left.

With that and knowing the height of the fixed elements, you can apply padding-top to the static (non-fixed) element.

#dvHeaderMenu {
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
    background: #CCCCFF;
}
#dvanotherContentwithFixed {
    top: 50px;
    width: 100%;
    height: 20px;
    z-index: 2;
    background: #FFCCCC;
}
#NonFixedContent {
    padding-top: 70px;
}

Example: http://jsfiddle.net/cjmvV/

Upvotes: 1

Related Questions