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.

score 5 · Accepted Answer · answered Jun 28 '11 at 22:03

5

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>

answered Jun 28 '11 at 22:03

javaJake

440
3
6

This didn't work... I already had fixed positioning set to container of the anchors rather than anchors itself. I will have to take a look at implementation of JQuery to see how they do it. – user_1357 Jun 29 '11 at 19:59
You could always simulate fixed positioning by using $(window).scroll, but I'd avoid that if at all possible. What didn't work exactly? (I tested the code before I posted and it seemed to work for me.) Sorry my first answer couldn't be of more immediate help. – javaJake Jul 05 '11 at 17:32
the background did not scroll?! – Daniel Cheung May 04 '13 at 12:51

score 2 · Answer 2 · edited May 23 '17 at 12:19

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.

edited May 23 '17 at 12:19

Community

1
1

answered Jun 28 '11 at 23:51

Pete Wilson

8,610
6
39
51

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

Looks like this may be a possible duplicate of this question.

In a nutshell, you can't do this with purely CSS. You'll need JavaScript. I recommend jQuery.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 28 '11 at 21:39

Charles Sprayberry

7,741
3
41
50

I am using GWT so I want to take a look at the implementation for the method. Can you give me a code sample to achieve this? Thanks. – user_1357 Jun 28 '11 at 22:00
@MayumiL sorry, I'm not familiar with GWT – Charles Sprayberry Jun 28 '11 at 22:03
I meant for JQuery snippets.. Thanks – user_1357 Jun 29 '11 at 03:59

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

3 Answers3

Linked