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.
Related
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.
I have a parent element with a fixed height, with 2 child elements.
The first element is dynamic in height, according to its content (or collapsed nature).
I want the 2nd element to be as high as it can be, until reaching the end of the parent's height. The trick is, I want it to be scrolled if it has more content than its height.
Here is a Fiddle demonstrating this. Notice the 2nd section is cut - I'm trying to get it to scroll. Of course I can have overflow: auto, but I want only the child div to scroll, and not the entire parent.
I solved this with Javascript and it worked fine.
However, due to some glitches and animations, it didn't look all that smooth.
I tried searching for a CSS only solution, but nothing I did came close to solving this. Is there a way, or am I bound to dynamic calculations in JS ?
.parent {
max-height: 250px;
overflow: hidden;
}
Edit: Fiddle had incorrect link, fixed now.
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've done a bit of Googling and found a number of references to the problem I'm trying to solve, but all suggest the same solution that I can't use. The problem is that I have a sidebar floated right and some divs that need to expand to the width left over from the sidebar, but then expand to the full width when the sidebar is no longer preventing them from doing so.
The jsfiddle is here: http://jsfiddle.net/qdk3n/
The solution found elsewhere is to apply overflow: hidden; to the .left items. This achieves exactly the effect I want: divs that share horizontal space with the sidebar only expand as far as the sidebar, but additional divs expand to the full allowed width. Unfortunately, there will be an absolutely positioned item inside the left divs that exceeds the size of the div and will get cropped if I apply overflow: hidden;, so I can't use that. Is there any way to accomplish what I'm trying to do without using overflow: hidden;?
Note: I don't know the size of either the sidebar or any of the left divs prior to page render time, and I cannot use Javascript in any way, shape, or form (since this is meant to work for users with JS disabled). The only dimension I can set in all of this is the width of the sidebar; the divs need to be fluid and I can't arbitrarily choose some number of them to only extend part of the way.
Also note: I've seen this: Div stretch then wrap around other floated div. It is exactly what I'm trying to do, but the only real solution is the overflow: hidden; property, and I can't use that.
Unless i missed something, i don't think it is possible to achieve exactly what you ask for.
The reason overflow: hidden; changes the behavior of the (display: block;) elements is something called "Block Formatting Context", which you can read about here;
https://developer.mozilla.org/en/CSS/block_formatting_context
http://www.communitymx.com/content/article.cfm?cid=6BC9D
Technically, you can keep the elements display: block; and have them respect the floated sidebar, by floating your left divs as well, but this will unlikely have the effect you want.
However, any inline content inside your left divs are going to respect the floated sidebar, so i don't really see the need for the divs to behave like you describe (maybe elaborate on your reasons behind it to get more constructive feedback).
I have a list inside a div with text of varying lengths. How do I make the div's width hold all of that content. I've tried width: auto (without actually knowing what would happen), but the div stretched out to the left of the window. Is there a property with which I can use to accomplish this?
If I'm understanding you correctly, you can use display: inline-block;
http://jsfiddle.net/H66TB/1/
I'm taking you to mean that you want it to stretch to the content and not just go all the way to the end of the screen.