Is it possible to have HTML elements with the same width (100px) and different heights filling up all the gaps in the top end of a container with a fixed width (300px)?
What I have got so far. fiddle
As you can see, the 4th, 5th and 6th block do not fill up the gaps above. Is that possible somehow without the need of Javascript?
Not possible with pure CSS using the html layout you're using. There's a plugin called Masonry that is popular fior this kind of layout: http://masonry.desandro.com/
Related
I'm trying to create a blog post display grid. My fiddle is here These divsare currently centered in the middle of the page, which is fine; however, I would like to:
Change the alignment of the divs to the left, not the center; so that as each post is generated, such is done in the natural reading order.
Make the height of the divs responsive. By this I mean, the height of the individual divs are already responsive; however, the next row of divs is aligned based on the bottom of the single-longest div in the row above it. I would like for each div to fill in the space not taken by the div above it, as depicted in the picture below
Currently, my code renders me this:
Any idea as to how I achieve this? Thank you!
You could use this modern CSS approach (won't work for older browsers)
column-break-inside: avoid; // for each content "widget"
OR
You can use some of the javascript libraries allowing you to achieve this:
bricklayer.js
Masonry
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces
this is the code that I used http://jsfiddle.net/D9rHB/6/
I think that the jQuery Masonry plugin would be what you're looking for in this instance:
Masonry is a dynamic grid layout plugin for jQuery. 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.
JS Fiddle demo.
You can do that. For that you have to have position as "absolute".
Then manually calculate the height and top value to place the div where ever you want.
For making the things easy take the width of all divs same. Also make height of divs in each
column fixed.
Let me know if you need more clarification how to do this.