html - How to prevent overlapping of a "position-fixed" element with variable size -

i have "position: fixed;" element shall visible on top of page , contains contents variable height:

div.topfloat {     position: fixed;     top: 0;     width: 100%; } 

the problem overlaps content , "top-padding:" property depends on height of "position: fixed" element.

therefore need this:

div.content {     padding-top: [height of topfloat-element]; } 

the html rather simple:

<div class=topfloat>variable height</div> <div class=contents>please don't overlap me</div> 

is there way solve without using javascript?

here non-javascript solution, it's not pretty. idea markup sticky element twice, , set visibility:hidden; + position:static; on cloned one.

.top {      position: fixed;  }  .top + .top {      visibility: hidden;      position: static;  }

<div class="top">variable height</div>  <div class="top">variable height</div>  <div class="content">please don't overlap me</div>