Floating divs, equal height - fill space with additional div without overflow
Pure CSS solution
Here is a DEMO of that solution.
In this DEMO, you see multipple Row
s,
each Row
can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder
, and can have any number of Elements
you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3 Row
s.
The First Row
has the starting point, so no stretch needed there.
The Second Row
has 3 ElementsHolder
, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row
has 2 ElementsHolder
, behave as expected.
notice that the stretching works regardless of the Element
s height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;
,
Each row has ElementsHolder
s that gets equal width.
each one of those ElementsHolder
is also a flex box, but this time his direction is opposite (flex-direction: column;
).
the child's of ElementsHolder
are Element
s & Arrow
s, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the flex
property with the appropriate values.
More about the flex-model can be found HERE
How do I keep two side-by-side div elements the same height?
Flexbox
With flexbox it's a single declaration:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
different height divs float in two columns
You're going to have to do this with JavaScript. If you're using jQuery, there is an excellent plugin called Masonry. There is also the non jQuery version.
To quote the README on GitHub:
Masonry is a dynamic grid layout script. Think of it as the flip-side
of CSS floats. Whereas floating arranges elements horizontally then
vertically, Masonry arranges elements vertically, positioning each
element in the next open spot in the grid. The result minimizes
vertical gaps between elements of varying height, just like a mason
fitting stones in a wall.
The single column layout is probably what you're looking for.
If you don't mind leaving older browsers in the dust, there are the CSS3 column
properties. There's an example here, on Quirksmode, and some documentation on the MDN.
Related Topics
Simulating Color Stops in Gradients for Ie
ASP.NET MVC 4 Minification & Background Images
CSS Modules - Exclude Class from Being Transformed
Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump
CSS Icon Using :Before Keep Text from Wrapping Under
:Before and :After Pseudo Elements on HTML Tag Is Wonky in Chrome
CSS Attribute Selector + Descendant Gives a Bug in Webkit
Impossible to Add Pseudo Element to Canvases
Using CSS to Create Custom Borders with Just the Corners Showing
Twitter Bootstrap: White Space on Left and Right Side in Smaller Screen Widths
Remove Padding from Unordered List
How It Works CSS Font-Weight Values
Css: How to Increase the Size of a Osx Submit Button
Linear-Gradient Not Working in Chrome
CSS3 Image Frame-Border Z-Index
Take 2 Columns in 2-Columns Layout But Not When 1-Column Layout in CSS Grid Without @Media