I'm trying to place a div to the far right of the screen, only for the viewers with high resolution. Hence I don't wan't the div to move too far to the left when the browser's smaller. I'd like a margin like 1000px from the left browser "wall" - but still let the div stick to the right wall. I don't want the div to get any closer to the left. I've managed to get the div to stick to the right, but I can't change the margin to the left. Whatever I do, the margin stays the same... Screenshot from Firebug: The yellow part is the actual margin of the div - where the div stops to move to the left. It's about 450px wide. I haven't set this margin on anything! It seems to me quite arbitrary... Is it possible to change this float margin in anyway? My current CSS is as simple as: float:right; margin-left:1000px; (useless) overflow: hidden; (don't want the scrollbar to care about this div) Please? Someone?
That makes no sense whatsoever - you claim you haven't set a margin, when you've clearly set a 1000px margin - as to the rest, I cannot even make sense of it... Like the overflow - all that would change is the scrollbar on that element, NOT on the page. I THINK what you are asking for is min-width, not margins... margins don't overhang on floats, so there's no way for that left content to 'ride under' that float's margin. (or should I say, it's CDATA won't)... Is the area left of it supposed to be fluid width? If so, set a min-width and build it as per a normal two column layout.
Bwaha, I saw something like this, but on both sides... the easy way would be to just have that image as a background image on the body and set the background-position: 1000px 0 or something. Since you state only users of a higher resolution or wider screen will see this, you don't want anything set to the right who will force the width of the page to widen. The technique I saw was something called workawesome, or awesomework, or workisawesome.com... I forget. Anyway, it's bloat city but the guy had like a bunch of little images who only showed up if your screen was side enough. He made HTML images (so <img src="blah"...) as children of some of the relevant boxes on the page, and set those boxes to pos: relative and the images to position: absolute and then gave them negative positioning numbers (so left: -199px or whatever it took to position it past the left side). *edit aha, here it is http://workawesome.com/ It takes a while to load on my machine, he's got a lot of images, but the technique is what I wanted you to look at. Thing is, with abso-po'd images on the left of the screen, they don't create a scrollbar, but the ones on the right did...I think because they're still stretching the body. So probably an off-positioned background image on the body or some other all-page container would do it. The image shouldn't be able to stretch the page further right, but I've never done this with the body before.
Exactly - I still wan't the scrollbar for the entire page, but not on that element - I don't wan't a horizontal scroll bar. I've tried to make a wrapper div, containing a left float with a min-width (with my entire layout in it), and a right float with my image I wan't to stick to the right. But still - it goes way beyond the min-width of 1000px.
Good idea, but I allready have a background image, and I wan't this image, with transparency, to hang over the background image! Thanks for the example, but these images has a calculated distance from the main content - in the center of the screen. I use a left-aligned layout for my main content, that's why viewers with a high resolution will find a lot of empty space there - that's with a lot of empty space there... And I wan't this space to contain an image calculated from the right edge! So it will stick to the right whatever size of the browser window you've got! I've tried with a 1000px of empty space to the left of my image in my transparency png. I can get it to stick to the right with position absolute right:0, but the image goes beyond the left edge. I thought it might stop at the edge of the image... I'm not so good at this... so if there's someone with a simple solution - try to describe how to do it. These positionings and divs is quite hard to get a grip on... for me.
I think you missed what I meant - I meant the scrollbar INSIDE the element. Setting overflow on an element has NOTHING to do with the page scrollbar. Stomme Poes probably has it right, make it a background-image on body... though, you MIGHT be able to pull it off with a negative margin to reduce the elements flow width. If the image is 600px wide for example, set it to float:right; margin-right:-600px; - that should move it over equal to it's width while not influencing the page scrollbar ( in theory)
Hm... If it was a bg image on the body (or any child who wraps the rest of the page without width constraints) it could be set to 100% 0 to be top and always to the right. That doesn't fix the what-if-the-page-is-too-narrow problem though. I figured a bg colour on a box who only holds the left-aligned content could cover the image up, but someone's going to get a half-showing image at some width then (maybe that's not a problem?). I should try that and see, but I'm pretty sure Konqueror would give a scrollbar, because it's nasty like that with negative margins : ( While increasing the browser width wouldn't move the float, if the float was a child of the body and always tried to stay to the right of the viewport + 600px further, wouldn't that mean a wider screen is still not going to see the image? I wonder if setting overflow-x to hidden on the body as well as a min-width would remove any scrollbar that appeared due to off-screen floats without compromising scrolling ability on the main content?
Well I did a little FF-only testie: http://stommepoes.nl/Tests/imageright.html Trying the image float gave ff a scrollbar also. It seemed also that FF actually moved the float continually offscreen as I resized the browser which I know it sure didn't use to redraw floats like that, not when they were just float: right. There's another trick: move your body's background to the html element (and if you're using a background colour place it there) and put this right-image on the body (and NO background colour). I don't remember if you have to manually set the height of the html element to 100% here or not. If so just do it for both html, body { height: 100%; } I don't know of that having any side effects so long as you don't screw with overflow. Otherwise, just make another container around the whole thing, keep the background on the body and put teh semi-transparent one on the new container, who should always be as wide as the body and as tall as the content anyway.
Uhm, SP - to do what I was suggesting it should be INSIDE the div, not before it... I think, I'll try that here.
Just tried that... my innernets here at DP and also wikipedia for some reason are giving server errors... either me or it's just busy