You know how on tumblr, the posts on your main page scrolls vertically? I want to do it horizontally. I know I have to use some type of display:inline or display:inline block somewhere. I tried it in my body tag, postbox tag, it doesn't seem to work.
Width in CSS doesn't quite work the same way as height does, and by default, content will always break on whitespace to stay within the width of it's parent.
You can, however, force an element to not wrap any of it's child elements by using white-space: nowrap;
This, in conjunction with overflow-x: scroll; will keep those elements inside a nice scrollable area, rather that pushing out the boundaries of their container.
You were on the right track with using display: inline; or display: inline-block; for keeping the content on the same line.. you could also use float as another alternative, or even table-cell display properties, but those should be a bit more case specific.
Here's an example that I put together, hopefully that should be all that you need:
http://jsfiddle.net/9xkPP/
Related
I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.
What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt
As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.
How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?
Here you go: http://codepen.io/seraphzz/pen/lutjb
The solution to this is:
Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.
I have client-side validations on a form that are outputting as label tags. They are displaying the way I want them to, but their width does not automatically adjust to the content within it. I believe this is caused by the width of the container that the form is inside of. Can someone help me fix this? Here is a jsFiddle:
http://jsfiddle.net/4eZY6/3/
If you focus on, then off of the fields you'll see the validation errors.
Altering the width of the element .home-form-container from 250px to 450px fixes it, but I don't want that element to be wider. Is this an overflow issue?
Try changing message from "block" to "inline-block". That appears to fix the positioning issue.
.field_with_errors .message { display:inline-block; white-space: nowrap; ... }
Block-level elements will break the flow (kind of like clearing a float), but inline-block will keep it in the flow of the element before it, while keeping the block-level properties.
To keep the message from wrapping, stop the element text from wrapping with the white-space: nowrap property.
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 wrapper element which I want to have a fixed width and make it un-scrollable to the sides (it's meant for mobile)
When I give the wrapper overflow-x:hidden I get a strange "borders" at the top and bottom.
you can see here: http://jsfiddle.net/ilyaD/nzGxf/3/
why is that and how can i remove them?
==updated the fiddle==
the overflow hidden does hide the elements that are wider then the wrapper but creates some kind of inner scrolled element with the frame that appears in the screenshot and a persistent scroll-bar
If what you're talking about is the space in between each box, the class "box" is inline-block, so the line-breaks in the markup are interpreted as implied spaces. Place all the inline-block markup on a single line <div></div><div></div>... and the "space" between will collapse.
To add to Jim H.'s answer, you could alternatively display: block; float: left the divs rather than display: inline-block them
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.