Hello Stackoverflow community, ive got question about positioning my div. When i double click td, div appears, but if that td is near right side, my div goes out of width, is it possible somehow to change floating from right side of mouse to left side? Here is the picture. Thats how it looks like if i want to change date which is in the right corner:
As you can seee:
How can i fix this to fit in window no matter what?
It's not a floating div, it's absolutely positioned.
The problem is that left: 1094px rule you have. Change it to right: 0px and experiment with the number that works the best.
If you want to lock it on the right edge of the parent element, make sure you put position: relative to the parent element.
Related
I created a contact form with a banner at the top of it. I created the entire thing and was planning on moving it to the right, off the screen, so that it will slide onto the screen when it is hovered over. I intended to just wrap a div around all of it and then relatively position it and move it however far I needed it to go to the right to be off the screen. However, when I tried to do this, it made the banner and the contact form box, as well as everything inside of those two elements, show up in a bunch of different random spots around the screen. I figured this was because it applied the relative positioning, as well as the left:100px value I set with it, to every element within the div and that, mixed with the other positioning I had set for each object, caused the weird displacements? Does anyone know how I can move the form and the banner so that they stay attached to each other and everything inside stays where it is?
Here's the JSFiddle where I set up the contact form box and banner: LINK
Thanks for any help
i'm not sure about all your absolute and relative positioning insde of your form - if you dont want to place the elements at very specific points you wouldnt need this.
here's a jsfiddle for what i think you want to have:
https://jsfiddle.net/spmhxteu/
basically you will need to set this for your email wrap
position: absolute;
right: -200px;
and you should set this for your body or whatever is wrapped around
overflow: hidden;
width: 800px; // example
all elements INSIDE your absolute positioned div do not have to be relative or absolute again.
UPDATE: As requested here an absolute positioning inside the element:
https://jsfiddle.net/spmhxteu/1/
Note: Ofcourse your padding etc. of the parent div will not apply on absolute positioning
This is the page: propertytest.uphero.com
I have narrowed down the problem to the 6 blueish boxes (the top 3 are under a div called offers and the 3 below that are under a div called properties). If I was to take them out, the space goes but I would really like to keep them in so I need someone to help me troubleshoot it so that I can keep the boxes and have no space below the footer.
I think my problem lies with the fact they are positioned with relative (all divs are positioned relative - bad idea I now realize that).
I have tried:
aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom/right however if I was to scale down the browser, the boxes go out of position..
removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to ( I don't think you can position floats with top/bottom/left/right or margin? )
Here is how to sort out the 6 boxes that you currently have as position:relative;
http://jsfiddle.net/F9Q6T/
The basic premise is that you float the boxes inside a container and then clearfix them to make the container the right size.
In terms of the issue at the bottom of the page you need to remove bottom:290px; from your footer. This appears to be what is causing the problem
I think main problem is body background image. You have used image of 1300px * 1000px size. i think you must use image of 1px width with repeat property.. And white space at bottom come due to bottom property of orders and properties div`
thanks.
So I have a box filled with contact information at the top of my webpage and I coded it with fixed positioning. The box follows you up and down the screen. I noticed after that was done that if i change the width of the window that it moves the contact box left to right.
I cant seem to figure out how to have the contact box move up and down the screen without moving left to right with different monitors and resolutions. I dont know if fixed positioning is the right answer because that is in relation to the screen?
CSS(minimum case):
position: fixed;
right: 24.2%;
top: 0;
width: 250px;
Use a fixed left position instead of a percentage right one which [without providing a layout] is most likely based on window width.
left: 200px;
try position:relative; in the parent element and see if it works
The way i solved this problem was by wrapping a div(lets call it wrapper) around whatever element i wanted to have fixed. I then gave the wrapper a fixed positioning with top:0 and now left or right param and i also gave it a width of the content area which was 980px. After that all i had to do was float the inside element to the right and it stayed there. Thanks for all the help guys!
I'm working on a new portfolio site which has a menu that looks like this: http://cl.ly/9rJ7
The Logo and three buttons are positioned absolute and have a fixed width (which will be changed by animation with javascript later).
The div to the right should therefore fit exactly into the gap between the third button and the browsers's right edge (as seen the screenshot).
I've already tried to give it a width of 100%, a position of left:700px and the parent div an overflow: hidden, but this doesn't seem like correct css to me, since the overflow doesn't work in some browser.
Any suggestions?
The Logo and three buttons are positioned absolute and have a fixed width .. The div to the right should therefore fit exactly into the gap between
the third button and the browsers's right edge .. I've already tried to give it a width of 100%, a position of left:700px
Try position:absolute; left:700px; right:0.
It's fine to set both the left and right properties.
If you float your left elements left, then add a div with margin-left: 700, it should fill the remaining space to the right.
I have a website, and I want to add a picture up in the top right corner (well 100 margin from the top and right).
I have all my content inside a table (I already know this is bad).
Here is the question: How can I position a DIV at exact the place I want, and without the table taking up the "gap" of the DIV.
For instance, if I have a table, and I place a DIV inside it and position it relatively, the amount of space the DIV "WOULD" have taken up is still taken up in the table column. Why?
How can I fix this?
Absolute positioning outside the table?
The table align is set to center, so I think absolute positioning wouldn't work outside the table...
Thanks
Try setting the table cell to position:relative;, then you can have the div as position:absolute; with the left and top as they were before.
Although, last time I tried this Firefox didn't like it, and I had to put a <div> inside the table cell first and have THAT as the relative-position block.
I wont get into the fact that you should probably recode your page...
Put the div outside the table so that body is the divs parent. Then when you absolutely position it it will be positioned relative to the body...
#id_of_div { position:absolute; top: 100px; right: 100px; }
Getting rid of that gap may not be possible. You can't control the positioning of cell elements besides the basic css for tables that is available: http://w3schools.com/TAGS/tag_td.asp
Can you convert the area to use a table-less design? I'm sure you can get plenty of help on how to do it on here :-)