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.
Related
I know that vertical alignment is an age-old issue and I don't want to beat a dead horse. But I feel like I've spent hours reading all of the clarifications and hacks, as well as what's supposed to work now with HTML5/CSS3 via flex box model, yet I have tried them all and still cannot solve this particular case:
<div style="border: 1px solid black; width:50%; height:50%; margin:auto;">
Notice when you resize your browser window, the div is always 50% the height and width of the browser window, and is always horizontally centered in the browser window. What I need is to get/keep it vertically centered as well. Is there absolutely any way, given that the div itself and the enclosing div are both of non-fixed (and unpredictable) heights?
Please note the goal usage here is to have this div inside another div, however the my example here puts it merely inside the body in order to best illustrate/simplify/test the results given an arbitrary size of both the enclosing and inner divs via realtime window resizing.
Use flexboxes, specfically the align-self property. Since you're using relative sizes its parent element will need to have some height one way or another, e.g. via min-height:100vh, otherwise it will have no height that its content could align itself to. A body element by default only is as tall as its content, not as tall as the viewport.
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 an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.
I have a collection of floating divs within another div. The child divs are of variable width and height - that is they're populated using dynamic data which I have no control of. Now sometimes what happens if that the last child div has a massive height with a wall of text because it is forced into a small width by the other divs. This only happens in IE 6, 7, 8 - FF3.6 handles it correctly - it makes sure the huge div starts after a line break with a big width.
Is there anyway I can force IE into the same behaviour?
Actually, if you specify a width for that floated div, then it will use that width, or else the floated div will "shrink wrap" to the content. So you can try that, or you can use this style for that float:
#the-last-div { clear: both; float: left }
you may or may not want it floated if you want it to be across the page all by itself.
The only solution to this is one of three: specify clear: both;, specify a default width, or do either or both of these dynamically with jquery/javascript. As long as you are letting the content decide the height and width you are going to run into problems.
Using clear:both; on all divs will put each float onto its own row. This doesn't sound like what you want.
Specifying a width will be the most predictable. The browser will respect the width and will clear to the next line if there is not enough space.
If you are loading content dynamically that requires a specific width then it should be trivial to dynamically adjust the containing div width appropriately. You can perhaps check the length of the content and assign a width to the div receiving the content if the content is too long. Since we don't have your code you'd have to experiment with the length and width to get it right.
Is the content that you're loading simple text or does it contain divs and other block level elements?
How is it floated? is it a mix of float: left; and float: right; ? or is it all to one side?
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.