I'm trying to display several chunks of data in columns next to each other. I have set the container to display inline, which works great if the columns are relatively thin. As soon as a column exceeds the horizontal screen length, the other columns get appended to the bottom.
My question is this: How can display inline column divs that are placed horizontally, with a horizontal scroll bar?
Note: I actually WANT the scroll bar; I want the elements side by side.
<div class="container">
<div class="child" id="1">Stuff</div>
<div class="child" id="2">Stuff</div>
</div>
---------
.child {
/*float:left;
margin-right:5em;*/
display:inline;
}
.container {
display:inline;
overflow: scroll-x;
white-space: nowrap;
}
Thanks,
Michael
We're trying to keep the browser from doing it's normal job: layouting stuff in such a way that it fits into the current window-size. It doesn't matter if the stuff is block or inline, still the browser will try to fit it inside the window.
You can give your container a fixed width to ensure enough space for all the columns:
.child {
margin-right:50px;
float:left;
width: 100px;
border: 1px black solid;
}
.container {
width: 1520px;
overflow: scroll-x;
border: 1px red solid;
}
example page
screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png
I think chaos is correct it just may be overflow-x: scroll; instead
Related
On the back of getting this question answered, I have a page that looks like this.
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
</div>
This page if there are a lot of spans will not wrap and it will keep going horizontally on the page and give me a horizontal scroll bar. Inside each span i have a html table but i am not sure that is important for question.
This works well but i have an issue when one of the spans is really long vertically and the others are short because you have to scroll down vertically to actually see that you have the horizontal scroll bar. I am trying to figure out a way to solve this so the horizontal scroll bar is always visible on the page regardless of how vertically long a particular span section is.
As an example, if you take alook at trello (see screenshot below). If you have a really long section vertically it add a vertical scroll bar JUST on that section, so the whole page doesn't need to be scrolled down.
In my case inside each span is a html table. What is the recommended way of implementing a vertical scroll bar just for that table (and not the whole page)?
You need a max-height and overflow-y on the interior elements, and you need to set sizes on the outer elements:
HTML
<div class="outer">
<div class="inner">foo</div>
<div class="inner">bar</div>
<div class="inner">whatever</div>
</div>
CSS
.outer {
border: 2px solid red;
float:left;
top:0;
bottom:0;
position:absolute;
}
.inner {
max-height:100%;
overflow-y:auto;
border: 2px solid blue;
width:30%;
margin-right:2%;
float:left;
}
Here's a working fiddle
body, html {height: 100%}
.what_wraps_your_span {overflow-y: scroll; max-height: 100%;}
Is it possible to do horizontal scrolling without a horizontal scrollbar. In Chrome its not very hard, because you can hide the scrollbar using "overflow-y: hidden". Checkout this jsfiddle.
Html:
<div id="main">
<div id="myWorkContent">
<img src="assets/work/1.jpg" height="190" />
<img src="assets/work/2.jpg" height="190" />
...
</div>
</div>
CSS:
#main {
height: 210px;
overflow:hidden;
}
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline;
}
So far a nice horizontal scroller without a scrollbar. However, in IE9/IE10 this doesn't work. Is there maybe an other solution for this problem or something missing in my css ?
The overflow separations in x and y are only a recent convention, prior to that there was no way to disable the scrollbars individually. You had a few options however:
Hide whichever scrollbar using another layer, you had to guess at dimensions per OS.
Clip the scrollbar out by either using an outer wrapping parent with overflow: hidden or clip:rect(). Again guessing dimensions, not ideal.
By the looks of things you don't actually require either scrollbar though, so you have a few more options:
Use overflow: hidden.
Use an <iframe /> with scrolling="no".
Overflow
In your case using `overflow: hidden` changes the way your elements extend across the horizontal. To get around this you need to calculate the sum of the widths of the items you wish to show in a row, and set this as the width of the wrapping parent.
It seems that hiding overflow actually prevents the scroll from happening what-so-ever, my memory must be failing in my old age. Could have sworn I used it previously, I guess I was relying on JavaScript more heavily that I'd thought.
So instead of using overflow: hidden you can use the first point I mention, which is using overflow: auto but you clip out the scroll bars. This can still require the need to calculate the dimensions of the horizontal parent:
Meaning:
[ [ 101px ] + [ 101px ] + [ 101px ] <-- wrapping parent would be 303px ]
But involves a slight modification of what I wrote before:
CSS:
.viewport-clip {
width: 100px;
height: 100px;
overflow: hidden;
}
.viewport {
width: 100px;
height: 130px;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
}
.horizontal {
width: 303px;
height: 130px;
}
.item {
width: 100px;
float: left;
background: blue;
margin-right: 1px;
height: 100px;
}
Markup:
<div class="viewport-clip">
<div class="viewport">
<div class="horizontal">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
The .viewport-clip is used to hide away the unwanted scrollbars. We give .viewport an excessive extra height +30px so that the horizontal bars will be taken out no matter the OS — It would be a strange OS to have scrollbars that thick. This does mean you have to make sure you give your scrollable content exacting heights, you can't rely on any height percentages or anything.
As before you still use the .viewport element to restrict the viewable region, and it can still be scrolled using JavaScript:
document.getElementById('viewport').scrollLeft = <pixel value here>
The user will definitely be able to use whatever human interface devices they have i.e. mousewheel, touch device; as the area is just a normal scrollable div. However you should always provide some UI to scroll just in case the user doesn't have this option.
Iframes
Another approach is to use an iframe, where you use scrolling="no" to disable the bars. This has the benefit of not needing to know the dimensions of your content, but comes at the price of having to deal with an iframe.
<iframe src="contents-to-be-scrolled.html" scrolling="no" />
Update
My recent modifications are to be found in this fiddle.
http://jsfiddle.net/kdRJ7/
By making the #myworkcontent div, you can lower the overflow, which will then be covered by your #main div. Then, you can just use a div with clever relative positioning and the same color to cover the white of #myworkcontent. You will also probably need to extend #myworkcontent's size so that #main can fit within it, but the overflow-y: hidden; property will keep things from getting messed up. Here's an updated Fiddle: http://jsfiddle.net/9QYJ2/4/
I only didn't add the cover div, didn't have time to incorporate that but I'm sure you're familiar with absolute and relative positioning, if not check out W3 schools, they have great tutorials!
I know this is a standard question, but I am trying to get a very special behaviour. I got the following example code:
CSS:
.left{
background-color: red;
min-width: 300px;
width: 40%;
float: left;
}
.middle{
background-color: blue;
width: 40%;
overflow-x: auto;
white-space: nowrap;
float: left;
}
.right{
background-color: green;
min-width: 100px;
width: 10%;
float: left;
}
HTML:
<div class="left">LEFT</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="right">NOWRAP</div>
I do not want anything to wrap. When resized, the middle div should be rezized, but it shall never wrap!
I need variable widths.
When I shrink the browser window, at first it looks right: The middle div becomes smaller and gets a scrollbar. This is what I am looking for. But when I continue shrinking the green div gets wrapped. Instead I want the middle div to become smaller and smaller.
I am already using bootstrap 2.
Thanks for your help,
best regards,
Yaron
The green div gets wrapped until the min-width is reached. Then your div.right ("NOWRAP") will float under the middle and left div. To avoid this your have to reverse the order of your divs:
<div class="right">NOWRAP</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="left">LEFT</div>
Then make your .right div
position: absolute;
right: 0;
and delete the float.
Now you only have to change your floats from the left and middle class to "right" and the width to for example "50%". That's all.
Here an example: http://jsfiddle.net/5MdY3/
Here's the ANSWER.
I've used Bootstrap 3 CSS framework in order to achieve what you asked for with my knowledge. I guess so it can even be done without bootstrap but I'm not that expert. By your post i'm thinking that you're looking for some responsive design. To make it easy I'd suggest you to use Bootstrap 3. Amazing framework that helps to do a lot more things in a seconds.
I have a div element, that I essentially want to turn into a window (of sorts). Basically, within that div element is content that extends beyond the view port of the "window" (div element). Here's a picture of what I'm trying to accomplish:
Now, I tried creating a div element of a fixed size, and gave it overflow: hidden, then placed the larger bit of content within that. The problem is (and I've only tested this in chrome so far), that when one of the inner elements no longer fits 100% within the overflow area, it disappears.
To know what I mean, I've attached another picture:
Notice that the turquoise portion to the right is missing (sorry about the white spacing to the left of the yellow, that's just a bad crop job on my part).
Is this a solvable problem without doing something hackish (such as extending the width of the "window" box, then absolute positioning another box in the right portion to hide that new area)?
Edit The question has been answered, but here's the fiddle for everyone to see what I was trying to accomplish: http://jsfiddle.net/MRnL6/1/
Thanks!
I think I understand what you're getting at. I think your elements are dropping down to the next line because their parent container isn't holding them. Try creating a container inside your window to contain the elements with a width equal to all of its children. See this fiddle for example.
The HTML:
<div id="window">
<div id="container">
<div class="elem one"></div>
<div class="elem two"></div>
<div class="elem three"></div>
<div class="elem four"></div>
</div>
</div>
and the CSS:
#window {
height: 100px;
overflow: hidden;
width: 250px;
}
#container {
width: 400px;
}
.elem {
height: 100px;
float: left;
width: 100px;
}
.one {
background: #0f0;
}
.two {
background: #f0f;
}
.three {
background: #ff0;
}
.four {
background: #0ff;
}
If I understand you want to be able to scroll to the content? Try overflow:scroll.
I think you are trying to accomplish something like this.
Please see:
http://jsfiddle.net/UMJwT/2/
try adding a intermediatary
div
The easiest option is to restyle the inner portions so that they all fit instead of overflowing.
See this demo
#container{
width:400px;
height:100px;
border:5px solid gray;
margin:10px;
}
.test{
display:inline-block;
width:25%;
height:100%;
}
I'm trying to align 3 divs next to each other, with 2 flexible width and 1 fixed width.
Please see the following jsfiddle:
http://jsfiddle.net/qyGC5/82/
I've seen this post: Three DIVs next to each other with fluid horizontal width
but it doesn't work with 2 flexible divs or even with just 1 flexible width (the one with the long text). http://jsfiddle.net/qyGC5/89/
I also though of percentages, but since using 100% is out of the question, the gap would get bigger or smaller on resize.
Any help, much appreciated.
Thanks.
EDITED
Adding some screen shots to show what happens after I ajax load new comments (this is to display comments)
BEFORE THE AJAX LOAD MORE COMMENTS
AFTER THE AJAX LOAD
Forget about using display: inline-block for this.
Use float: left on .sides and overflow: hidden on #main.
See: http://jsfiddle.net/qyGC5/93/
<div class="sides">side 1</div>
<div class="sides">side 2</div>
<div id="main">Lorem ipsum..</div>
.sides {
width: 30px;
border: 2px dotted green;
float: left;
}
#main {
border: 2px dotted blue;
overflow: hidden;
}