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.
Related
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 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.
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/
I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.
I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.
I've tried sticking the images in:
divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "catch" on the bottom of a div on the row above.
spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.
If you use display: inline-block on your spans or lis, that should allow you to set the width.
http://jsfiddle.net/bnmPR/
You could use lis and make them display:inline-block;
http://jsfiddle.net/jasongennaro/zDC2w/
Drag the window over to see it work.
borders, width, and height added to show effect
you can still use you divs that float left and add this script: http://masonry.desandro.com/
It will push the divs up vertically so that they are beside each other.
Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.
The problem is similar to http://www.alistapart.com/d/holygrail/example_4.html except he side column widths can not be hardcoded.
Is it possible to do this purely in CSS?
It sounds like you need display:table-cell
http://www.w3schools.com/css/pr_class_display.asp
Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.
To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"