How can i have text that is always float: right with a horizontal scroll bar

Question

I have a top navigation section at the top of a web page and I have some content that is setup as

 float: right;

this works great except that the content part of the page is now very wide (i have to set min-width: 1700px;)

the issue is now the float: right works great except when i scroll to the right, its no longer on the right.

my choices are either to:

Make the top section min-width:1700px as well but them it would float right and it wouldn't be shown unless i scrolled to the right

Is there any way to have float: "rightofMonitor" so it would default to the right side of the monitor viewing screen but when i scrolled over horizontally it will keep moving right.

Any HTML sample to work with? – Smamatti Nov 14 '11 at 14:14 — Smamatti, Nov 14 '11 at 14:14

score 5 · Accepted Answer · answered Nov 14 '11 at 14:20

5

You can use this : http://jsfiddle.net/XHRkS/

use the position:fixed; and right:0;

answered Nov 14 '11 at 14:20

GregM

2,634
3
22
37

you might want to set either the top or the bottom to sort out the position – topherg Nov 14 '11 at 14:28

score 2 · Answer 2 · answered Nov 14 '11 at 14:16

2

Forget the floating. You should set the position to absolute and then set the right to 0.

answered Nov 14 '11 at 14:16

Nate B

6,338
25
23

depends on how you set up the HTML, if it is just an element hanging out by itself, the absolute positioning works, if it has a wrapper like your JSFiddle, then the fixed is the way to go. – Nate B Nov 14 '11 at 14:28

score 0 · Answer 3 · answered Nov 14 '11 at 14:29

0

Sounds like you have it in a container and it is floating to the right of the container not the body. Take it out of the container and put it below the body tag. Or give it absolute positioning of right:0;

answered Nov 14 '11 at 14:29

Tim Joyce

4,487
5
34
50

How can i have text that is always float: right with a horizontal scroll bar

3 Answers3

Linked