Develop Reference

Programmatic scroll on a div with parent with overflow-x hidden

It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this

It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.

Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work

IE: First list item smaller than rest

Any thoughts? The first list item is being squished, but only by IE. All of the other browsers are happy.
http://dev.torontofamilytherapist.com/services/

Robbert has the correct answer but no reason. The reason why this is happening because the right two images are bigger than the container. The first one is not. Therefore it hits the width:auto and thus it is shrunk to the dimensions of the image.
Rather than changing the css, you can replace it with an image of the correct dimensions (370x264).

I looked at your code in the IE Console. When I removed the checkbox next to width:auto; in bootstrap.css, the image expanded correctly. While I'm not sure why this fixed the issue, it does fix it.
You'll want to override the CSS statement elsewhere.
.featured-thumbnail img { width: 100% important!; }

If the image has smaller width than it's parent you need to put width: 100%; in order for image to cover entire container, otherwise width: auto; limits it to image actual size.

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!

Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}

Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.

Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

Dynamic widths for breadcrumbs

I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.

Beside the answer of #JAYBEkster, you could consider using flexbox.
Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/
/*
COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#container {
display: flex;
justify-content: space-around;
list-style: none outside none;
margin: 0;
padding: 0;
}
I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.
Maybe keep this question updated.
Update 2: flexbox is awesome.
It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/
All you needed to do was:
.breadcrumbButton
{
flex: 1 1 auto;
}

You should add display:table for your container; add display:table-cell for each child and remove floating;

overflow: hidden on the left side too?

could one use overflow:hidden for both sides?
cause i want the row to be centered.
EDIT: ive got a row of link elements. i want it to be like: http://jqueryfordesigners.com/coda-popup-bubbles/
the row will stick out both to the left and right. not just on the right side. with other words: i want to center a very long row within a div which is styled with overflow:hidden and white-space: nowrap.
here is my code:
http://jsbin.com/afuni/edit
if the row is too long the right elements wont be shown. i want the left elements to not be shown too so that the center link will always be in center.

overflow: hidden will hide content that doesn't fit inside it's box model. Based on the question asked, I believe there is a different CSS solution for you. Can you post the HTML/CSS and your objective?
edit: to center a row that may extend outside its boundaries, I would use z-index: 100, position: relative, and text-align: center. I need to check your markup, however. Hope that helps!

Nope, you can't make the text clip from both edges using overflow: hidden, you need additional markup with negative margins etc. Not worth the trouble I think.