CSS how to position element fixed just for y-axis?

Question

I have an element( 2 anchors next to each other) inside the div(spans about 1150px so you need to scroll down to see all the contents of this div). This anchors are position:fixed at the top of this div so as you scroll down the div anchor will be visible all the time. My problem is when you shrink the width of the browser window, I want second anchor to go below the first one as the space runs out, however until the browser window physically reaches the anchors, no wrap around is happening, so div is getting smaller and two anchors are overlapping each other.

When I remove the position fixed, as I resizes the browser window and div's width shrinks one anchor wraps below the other one as expected. So I am guessing I just need y-axis fixed but not x-axis.

Answer 1

The position attribute applies to the element as a whole. What you're really asking is for a new kind of position attribute.

You could apply the fixed positioning to an element that contains your two anchors, and if your anchors are set to float, they will wrap if they need to:

<style type="text/css">
  #fixed {
    position: fixed;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
</style>

...

<div id="fixed">
  <div class="left">Lorem ipsum dolor sit amet,</div><div class="right">consectetur adipiscing elit.</div>
</div>
<div id="content">
  <p>something here...</p>
</div>

Answer 2

A similar question about fixed-y / scrollable-x was the subject of an earlier discussion whose conclusion was you need JavaScript to do it, as others have said.

The general approach in that answer was to look every tenth of a second or so to see if the elements should be moved, and then to move them if so.