I am struggling to place a button at a absolute position. When I use float:right, Its too much for me , I also used position:absolute and right:350px however this gives me problem in resizing the browser.
So How can I place my button such that I can use float:right minus certain space?
Related
Let's say I want to have an element that is always in the lower right hand corner of the browser window. I don't want it to occlude any of the other content on the page. This is typically accomplished using a float, but floats are affected by scrolling.
Is there a way to make something like a fixed float? I've attached an image for an example.
I have a DIV that pops up in a set position via a jQuery function when you mouse over an image, there are quite a few of these vertically (say 1800px in total height)
The problem is that if i go down to the bottom of the page and mousover, the div appears too far up (out of the browser).
How can i get that div to not flow off the op of the page? IE stick to the top, instead of going off>
I think you're wanting to position it relative to the view port and not the page, is that correct?
If so, you need to use position:static on your element.
I'm using a "homemade" php calendar in my site's right sidebar. The site's body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here's a visual representation:
The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.
Thanks.
Edit: Sorry, I forgot to mention the way I'm making the boxes show up. It's entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They're kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.
I don't want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor's screen size.
For Javascript:
Check for the size of the document (to find the right most pixel)..
Check for the right most pixel of the box
Subtract box.right from document.right and move box left by that amount
For CSS:
Make the position of the box absolute and right: -10;
This is more a CSS / Javascript question.
First way: assign {position:absolute; right:0} to the popup div and {position:relative} to the containing div, so it will be floating to the left all the time.
Second way: use javascript / jQuery to calculate the right edge location of the popup div, modify the left if the div is going to poke out of the edge.
I would like to know if I can float the div like this using CSS. What I would like to do is to move the DIV which is CSS DIV 2 under the CSS DIV 1 to the right when reducing the windows size. See the screenshot below:
This is how three DIV would display on bigger windows size. First DIV is at the top left corner, the second DIV is under the first DIV. Then the third DIV is on the top right.
When I resize the browser windows, the third DIV which has wider width will drop to the botton under the first DIV, and the second DIV will automatcially move to the top right corner to fill in the space.
Anyone think that this is possible to do it by using CSS, and might not need to use JS or others?
Thanks
I'd say that change is achieved either by changing from a columnar layout to a row layout, or else by swapping the order of the two elements. Either way, it requires JavaScript.
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.