I'm working with WP 3.5.1 ATM. My goal is to make the articles 300px in width, then float them to the left, then the rows stack directly underneath each other in vertical & horizontal alignment. The issue I'm having is that when it get's to the second row, it doesn't line up directly underneath the first row vertically, but does horizontally. This sometimes leaves huge vertical gaps between the first and second row, if one article in the first row is long, while the others are short.
I have never tried doing this layout before, so I'm wondering if I can get some pointers from those that have. How can I make this happen? Or perhaps a tutorial site? I googled it, but didn't find anything on the method.
Examples of my goal are mysocialcloud.com, new.myspace.com, so.cl, and this one in particular: http://www.eleventhemes.com/gridly/
Thanks.
Alternatively, if you are looking for JS-based method which offers better cross browser compatibility, try jQuery Masonry.
Float your elements as per normal, but Masonry will then reposition your elements according to the available space by absolute positioning.
If you are happy to use CSS3 then you can wrap all of your content in a div and then use the column CSS:
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
I have made a Fiddle http://jsfiddle.net/DVfGP.
I created a div with the column css and then a div to contain each element. I applied the following css to the elements:
display: inline-block;
width: 100%;
this keeps the all of the element in the same column. Hope that is what you were after.
Related
In the example code below I have a complex structure of nested containers which represents blue boxes in flex containers. The whole thing is nested ina scroll container.
The issue is that the blue containers are squished on Safari:
There are lots of examples here on SO which concern such an issue. The accepted solution in most of them is to add flex-shrink: 0;
In my case, this would mean adding flex-shrink to the .stackchild and #StackChild. This is a styled react component but for the sake of the example, the random CSS classes are replaced with a class and id just to be distinguished.
When I add flex-shrink: 0 to the stackchild I get another layout issue on all browsers:
Tbh I'm not quite sure what's going on here ...
Any idea why does the shrink prop break the layout in this way? And how to solve this so that all browsers are happy?
Code example here: https://codepen.io/pollx/pen/oNbmEoE
Setting a min height alongside stack child appears to work.
https://github.com/philipwalton/flexbugs
.stackchild {
display: inline-flex;
margin-top: calc(16px / 2);
margin-bottom: calc(16px / 2);
min-height: 0;
flex-shrink: 0;
}
https://codepen.io/jspenc/pen/rNxEOme
I'm creating a responsive skeleton of a gallery that will be inserted in a wordpress. The gallery is made of images of different sizes. The thing is I can't figure out how to stick div, which are on the "second row", right below the div of the "first row".
Here is a codepen of my actual work:
http://codepen.io/anon/pen/JdXPde
And I want my gallery to look like: http://webplantmedia.com/starter-themes/wordpresscanvas/features/gallery/gallery-columns/#gallery-6
Ahh, it loaded eventually. I don't think you can achieve what you are after with inline, inline-block nor floats. I think you would need to use absolute positioning as per what they are using on the link you forwarded. I can recommend using isotope https://github.com/metafizzy/isotope which does all that for you. It is a great tool.
Depending on your browser support matrix you could use CSS columns if you don't wish to use JS.
.wrapper {
column-width: 500px;
/* plus browser prefixes */
-moz-column-width: 500px;
-webkit-column-width: 500px;
}
Stick a div around your elements with a class of wrapper.
I have some divs, and I want them to start filling the main div vertically, and then cause the main div to scroll horizontally.
Currently, I'm using float:left on child divs, but it does exactly the opposite: it starts filling the main div horizontally, and then the main div scrolls vertically.
The number of rows may differ based on screen size, so I can't create a table for this purpose.
table + some javascript hacks may allow me to do this, but I prefer a CSS (without any javascript) way. Because this code will run on mobile apps, and javascript will slow down the web app.
This is my current code, and here's the result of my current code. But I want something like this.
UPDATE: As #goliney suggested, seems that it can be done with css-columns. I created this example right now.
Now, there are these two problems:
While it's working good, it still needs some javascript to determinate number of visible columns (column-count) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too?
Also, I prefer to show a little bit of fifth column, so user can know that this list is scrollable horizontally. But columns-count can't accept some float value (like 4.2), it only accepts integer values. So how can I do it?
As #goliney suggested, css3 columns can help.
I've created an example of using css3 columns in this issue, here.
However, it needs javascript to figure out count of columns, or since I'm targeting tablets, I can create some predefined classes using media queries.
Second, I needed some way to show a little bit of next column, so user can know that this list can be scrolled horizontally.
I've found that if I set a margin-left and then take it back into it's right place using translateX, it'll happen correctly.
So this is the final code for container div:
.main {
column-count: 4;
column-gap: 40px;
height:480px;
margin-left:80px;
transform: translateX(-80px);
}
(I removed prefixed properties here, but they're available in jsFiddle)
And this is the final result in jsFiddle.
I have such url: http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115
there you could see that i have three columns
i have such troulbe: id="manufacturers-list" if i delete min, and height, i see that my li is separated in different colums
, but how to prevent this?
i didn't get why i get this separation(( why it slice my li?
css:
width: 690px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
overflow: hidden;
The thing that's separating your content into different columns is the CSS column-count property (including the vendor prefixes.)
To explain both your images, the first looks like you have a set height with overflow: hidden which is going to conceal every single list item that flows past that height. If you have 50 list items but your container only has height enough for five, you're not going to see more than five.
The second looks like you've removed your height and given a column property.
I just looked at the site and you might want to remove the display: inline-block style from .man-area, remove overflow-hidden from the outside container (#vip-offers)
And SOMEWHERE you have inline javascript (or styles) giving that parent container a fixed height. I would definitely not recommend giving a fixed height with a hidden overflow. It just doesn't bode well unless you're trying to achieve a specific effect.
A <div> element has text-align:left; width:500px; and, inside it, a child <div> has more than 20 other <div> elements with width:20px;.
My question is, without using float:left how we can put all elements side by side from the left?
Screenshot:
I would guess that display: inline-block will get you pretty close to what you want. It will generate a block box for the contents (allowing you to specify block level properties such as width), which will then be flowed inline.
You can use the CSS3 Columns Module column-count property for this. You will also need to include the -moz and -webkit version for compatibility reasons:
#container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Unfortunately, this property is not available on all versions of IE, so you'll need a Javascript alternative.
A good method would be to check for column-count support with Modernizr, then create two additional container elements each one-third the width of the parent, then using Javascript we can watch for expansions and pull the necessary number of elements to the other two to maintain even sizes.