Develop Reference

Targeting the last odd element with a given class

I have a dynamic photo list, pulled from the CMS. Photos are vertical and horizontal. I am trying to create a "dynamic grid" where all horizontal photos are 100% wide and vertical photos are 50% wide.
I was able to achieve this with the help of JS.
codepen with my code
However, I have trouble targeting the last odd vertical shot that has a horizontal shot in front of it. I would like this photo to be 100% wide as well, so that there would be no unnecessary break.
I tried to use :nth-child() pseudo class but, that was not helpful at all. - its select only first child.
.wide + .portfolio-item:nth-last-child(odd) {
width: 100%;
}

Okay, I tried to overthink it, a solution was very easy -
on portfolio-item I should use:
flex-grow: 1;

Flexslider CSS/HTML/JS

I have this issue with my flexslider in which no matter what I do, I just can't seem to place the slider at the very top left of the browser window. It seems as if there's a margin of 5 pixels on the top and the left.
If I were using simple CSS, this usually fixes it:
Top: 0
Left: 0
I've tried those elements on seemingly every single parameter within Flexslider's CSS and for the life of me I can't position it as such.
I'm using FlexSlider-2.6.3
Any suggestions?

Have you tried:
html, body {
margin:0;
padding:0;
}
Also, check the containers for padding and margins.

Thanks for the tips.
I found the answer. I've been staring at a computer screen for too long today.
Within .flexslider, I needed to apply {position: fixed} into the criteria.

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;

100% layout with min/max sizes which doesn't overflow

I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan

Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.

Try using the following for the second widget:
position: fixed;
right: 0;

Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks

Is it possible to do this without resorting to Javascript?

This demo, which goes along with this article, succintly describes what I need to do. However I am not impressed by the use of javascript for something that should be possible in pure CSS.
The articles referenced (which I also found independently when looking for a way in CSS) don't perform the same function as the watchmaker demo - the 456 boxes demo doesn't slide under the other boxes when the screen width gets too small.
I've been playing about with the article code and trying various ideas in CSS, but nothing lays out correctly. Also I would prefer progressive enhancement over graceful degradation.

I realize this is an old question, but I wanted to bubble up the answer you should be using now: flexbox. The original demo from the question is long gone, but the markup was this (courtesy of the Wayback Machine):
<div id="one">I am 150px high</div>
<div id="two">I am 200px high</div>
<div id="three">I am 120px high</div>
<div id="four">I am 300px high</div>
In order to equalize the heights using flexbox, you would need to have a container wrapped around them:
<div class="container container--equal-children">
<!-- those four divs -->
</div>
Setting that to display: flex and setting align-items to "stretch" gives the desired effect:
.container--equal-children {
display: flex;
align-items: stretch;
}
Once that’s in place, you can skip the whole sizing thing and let the children flex to fill 1/4 the space:
.container--equal-children #one,
.container--equal-children #two,
.container--equal-children #three,
.container--equal-children #four {
flex: 0 1 25%;
}
They will all automatically be the same height.
I put together a CodePen that lets you toggle the flexbox rules on and off. It’s worth noting only the toggling functionality requires JS. There are also some "for presentation only" style rules I’ve added (which are noted) to demonstrate the design behavior.

Unfortunately, there really isn't a good way to do it in pure CSS. I assume that you want a dynamic height of containers based on a single parent container. Cross-browser issues make it an absolute nightmare, and the relatively small amount of JavaScript needed to accomplish the effect, IMO, is a better approach than trying to maintain really ugly and nasty CSS rules, having to import other CSS rules to fix things in certain browsers, etc, etc.
There's a reason these "equal heights" scripts even exist, and it's because of how much of a hassle the effect in pure CSS is.
I would stick with the JavaScript solution.

This is something which you'd think would be simple but is actually really tricky.
The "sliding under" aspect isn't really related to maintaining the same size. That's just how floating works. They probably have a rule like:
.box { float: left }
with markup like:
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
If they gave .container a fixed width, that would prevent the .box's from sliding under each other.
If all you're looking for is to have background colors under various boxes of fixed width, there is an easy way to accomplish this without JS.
You can give .container a background image that has the backgrounds for all the boxes and tiles vertically. With your first example, it would be only a few pixels high with a 200 px section of orange, 200px of blue, 200px of red, and 200px of green.
Since if you "clear" the .container it grows to contain all the boxes, the background boxes would appear to all be the same height.
Anything more complicated such as vertically centering the text in the second example, and you're probably better off going with one of the JS scripts to even out the boxes.