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).
Related
How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.
For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.
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.
I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css.
This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits to the content).
I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.
I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index
Can anyone recommend a way to accomplish this or something to look into?
Thanks
You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.
Up to now I have two choices (maybe there are more outside):
Set the width of body tag to a fixed length and set the horizontal margin of the body tag to auto. It makes all contents get horizontally centered.
Create a wrapping div inside the body. Set the width of the wrapping div to a fixed length and set the horizontal margin of it to auto. It also makes any contents inside the wrapping div get centered horizontally.
I don't know, which one is better. Or if you have another alternative that you consider the best one, let me know.
A wrapper div is more flexible, because you never know when you're going to want an element to not be centered. A couple months down the line if the site requires changes you'll be happy you had a wrapper div, ends up being less work because you can have siblings of the wrapper div and do what you want with them.
With that said, if it's a fairly simplistic trivial example/site, sure go ahead and 0 auto the body element.
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.