Ideally I would like to have divs aligned in a more intuitive way, see the fiddle: http://jsfiddle.net/stefek99/jZB2q/
I'm thinking about "get computed style" to compute heights and then change order of columns but I think it's overkill. Is there any simple strategy to make this CSS layout more aligned?
Thanks
Take a look at the jQuery masonry plugin. It does exactly what you're looking for.
You can use inline-block to have them pack in rows of equal height.
You can give even elements float:left and odd ones float:right for less terrible packing.
Related
i'm having a slight problem which i can't seem to figure out how to solve in a wordpress layout.
I have 3 columns which shows the recent posts with each one being an individual by itself, but as the div increases in height, it pushes the next line of div downwards, but what i wanted is just each div having a 20 px margin with each other.
here's a picture of what is happening
here's a picture of what i want
You might want to consider using Masonry to implement the layout you're trying to achieve.
HTML and CSS alone will not get you the effect that you are looking for. For the full effect, and a well put together tutorial, visit:
http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example
I am looking for a way (jQuery plugin perhaps) to create a grid of variable height, fixed width divs. Something used in Pintrest.com for those of you familiar. Using inline elements or inline-block would cause gaps. It appears pintrest.com uses absolute positioning, put I'm lokking for a way to detect size and align elements accordingly.
http://pinterest.com
jQuery Masonry is a good place to look for something more off the shelf - http://masonry.desandro.com/. There's also a quora thread on the topic - http://b.qr.ae/wcGASb
I am currently working on a new website and I want to have a div ID to fit 100% of the screen, however I want to have something as a width of 250px to the right of this div. I am trying to do width: 100% - 120px but doesn't seem to make any difference. How can I do this.
Thanks for any help you can provide.
If you want a div with 250px to the right, then you don't want the first div to be 100% of the screen. Set the second div width to 250px and the first div width to auto and it should fill the remaining space.
You can't subtract pixels from percentages, this isn't your answer, but I suggest learning the basics of css first, otherwise you will have no idea why things work the way they do.
Here is a good website with a lot of layout examples and tutorials: http://www.maxdesign.com.au/articles/css-layouts/
And http://www.w3schools.com/ for css standards.
As far as your particular situation is concerned, you are taking the wrong approach. If you want to be able to subtract width from 100% you can use javascript to accomplish this goal. with jquery you can do something like this:
$("#div").width($(window).width() - 125);
This will not work once the window resizes however. You can add resize events to resize your div when the window resizes but this is cumbersome and can seem laggy. Your best bet is to use a css implementation, your question is quite vague though, you seem to be describing a two column layout with a side panel, but I could be wrong. Just for a two column layout there are different options such as whether you want your main content to be liquid or static.
I'm assuming liquid because it is more useful.
I would like to recommend jquery layout for creating layouts. Uses javascript and it's very easy to use to make quick layouts. http://layout.jquery-dev.net/
Here is your solution: http://jsfiddle.net/Z3nfv/1/
This is what I have:
and this is what I want:
I have a container div around all of the smaller divs, and the smaller divs are floated left. How can I get them to align in perfect rows like the bottom image? This would be easy but the catch is I don't want to use a container div for each row since I want the number of images per row to be fluid (container width is variable). Is this even possible without JS hacks?
You could just change the float:left to display:inline-block. That will lay the images out in rows, just like text layout, which sounds like what you want to do.
I post this with some apprehension because I don't know what you qualify as a Javascript hack... There is a plug-in that would work well for this, Masonry JS. But if you consider a plug-in a hack then I would suggest applying a display:inline-block; to the elements that you want in a line and removing the float:left; property.