I am developing a store for a friend and I want to make the "ADD TO CART'S DIV" fixed when the users scrolls after it. As I am far from being a CSS expert I am facing problems with it.
I tried to use JS to add "position: fixed" to the div, but I cant do that because the div has a relative position and changing it do fixed mess up with all the div's elements
this is the link
and this is the div I want to make fixed (the div id is rightcol):
I would also want to make the div stop right before footer
Thanks in advance
Use this property to make div sticky on scroll
position: -webkit-sticky;
position: sticky;
top: 0;
the header is your website is also sticky. you can use the same properties it works
You can use position sticky. sticky element works as fixed element with respect to its parent element. It will serve as fixed in the space provided by its parent.
So in order for your project. You need to restructure your html in such a way that sticky element should get enough space to behave as fixed element in that region.
Related
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I am getting an error when trying to send a div to the very end of my site.
I am using a general height:100% and the div then moves to the end of the visible screen, but when I scrolls down to the end of the site, the div remain in the same position.
I want to add the div to the end, but for some reason I couln't do it.
Look at the pic.
My code: http://www.securebitcr.com/test/site2.php
I appreciate any kind of help with it.
Thanks,
Your #footer_dv has position: absolute but you want it to have position: fixed. An absolute position is relative to the parent so an absolutely positioned element will move and scroll with its parent; a fixed position is relative to the browser viewport so it won't move.
just remove the position:absolute all together and fix your height style of your body, you have 100%px; make it 100%; and your footer should just float to the bottom.
I'm trying to implement a CSS menu and am having a problem with the menu pushing the other content/divs down when the menu expands.
http://www.confetti.ie/index2.aspx
Can anyone tell me what CSS I need to stop the main body content being pushed when the menu expands?
The keyword is the CSS property position: absolute. It makes elements "float" over the other content. Absolutely positioned menu elements won't push the page content.
Use position: absolute for the one you want to be over and position : relative for the one don't want to move
Use position: absolute; to throw the element (sub menu container) out of the document flow.
I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.
The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).
I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.
Anyone know how I can do this?
I usually go with overflow: hidden or overflow: auto.
Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;
overflow: auto;
Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.
.abs-div {
position: absolute;
overflow: auto;
width: 160px; /* Replace with your width */
}
A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:
<br style="clear: both" />
This will force the element below the floated elements, which will stretch the containing div.