I have this layout with flexbox:
However, when the content in one of the columns of the first line increases, I don't get what I want. This next image explain what I get and what I want:
Basically, I want box 3 to span multiple lines, if needed, without changing the position of box4
Please help me into this. Thanks
This thing is not possible using Flexbox. You Should Use lots of Available JQuery plugins.
You can Check it out following JQuery plugins.
1.) Packery.
2.) MCPants.
3.) Gridster.
4.) Masonry.
This are some of the available plugins which will give you, Your desirable output.
You can also find other plugins on search engine.
Hope it helps.
Flexbox doesn't work this way. It won't randomly fill out to use minimum height. The calculations required by your browser would slow everything down, if it is even possible to have the browser guess what you want precisely. You'll have to adjust your design I'm afraid.
Flexbox won't do what you need but you still can use them.
Here's what it would look like so below explanations will be easier to understand :
Create 2 containers that will display inline-block. The 1st (blue blocks) is 75%, the 2nd is 25%.
Blue blocks are in a flexbox. Set the flex rules as you need it.
The red block has is own container, style it as you want too.
Based on the images you posted, blue blocks 1 and 2 are flex: 1 and flex: 2, that means block 1 will always be 25% of its parent. This is why I set 25% to the red block container.
Check fiddle for full CSS : https://jsfiddle.net/Paf_Sebastien/dyxtq144/
Related
I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.
IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).
I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIVs as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.
They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)
Do they use any specific library?
Is there any responsive framework/library that work in similar way?
I had the exact same problem and I think Salvattore is exactly what you are looking for.
It automatically creates some columns and puts all your grid elements into the right column.
The styling is then totally up to you, so no need for any position:absolute.
In fact thats all the styling you need:
.size-1of3 {
width: 33.333%;
}
Check it out: http://salvattore.com
I'm working with a mosaic (jsFiddle) made with simple CSS and HTML.
The mosaic has rows and columns of the same width and height. Each one of its cells should be filled by an entire box or a part of it. In other words, every box should occupy one or more boxes length-wise and one or more boxes width-wise.
When all the boxes take up only one row, everything works fine. However, when I try to make a box bigger than a row, the float:left stops working the way I want it to:
http://img198.imageshack.us/img198/5207/boxshoudgohere.png
jsFiddle with the issue as displayed above.
As illustrated above, the gray boxes that are (in the HTML) right next to the big box skip to the next row; I need to move the boxes to where the red arrows point. My question is: how can I prevent the gray boxes from moving?
Take into account that I would prefer a clean solution. In other words, moving the boxes with absolute or relative positioning wouldn't be the best option since the boxes and their width/height are generated by JavaScript (although feel free to post any answer).
Thanks for your time.
Jquery Masonry will do this for you. Unfortunately you won't achieve what you're after with simple markup and CSS.
You can't do that using a clean CSS code.
But you can use javascript, there are some jQuery plugins which do that, you could try Isotope
I'm trying to make sortable blocks with various heights using JQuery .sortable().
But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.
And when I set float: right to parent div instead of float: left I can't drag the big block to the left correctly.
I understand why it happens and how the float works but I can't find a workaround.
jsFiddle sample
UPDATE:
Here is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.
Now works I originally had an almost working model using a second wrapping div around the short items. The bug is in my FF Win 7 (seemed okay in IE9) which sees a slight height difference between the large block and the group of blocks, so a lower float "hits" one to the upper left (if it is a large block) and does not go left. When I look in Firebug, FF is showing the computed border to be not 1px, but 0.916667px, so I don't know if that is the problem (fixed now below).
See http://jsfiddle.net/tnLcg/47/. I had originally enabled the ability to sort between short holders, but I think the correct functionality would be to make such a move a swap. Perhaps http://www.eslinstructor.net/demo/swappable/swappable_home.html might be implemented to work between the short holder stacks.
EDIT--Firefox fixed: I kept the short holder border but set it to transparent (so it calculates the same as the double height box) then used relative positioning of the elements inside to adjust for that and it works in FF now for me: EDIT: Improved version (4 column) http://jsfiddle.net/tnLcg/99/.
You could try jQuery Masonry for that sort of layout (if I understood your question right).
If you want the two halves to be able to move independently, split them into 2 columns, then use the connectWith option to make them draggable between the two:
http://jsfiddle.net/ujahd/
If you want the two halves to stay grouped together, then group them into one div:
http://jsfiddle.net/W5VzD/1/
There also this tutorial if you were interested in reading up on it. Hope you found your answer.
edit: it's not jquery though.
I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?
Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)
Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.
I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.
My example here,
Shows an image in the center of CSS3 generated columns. I need the text in the column to the right of the image to wrap around the image so that it doesn't appear in front of the image. This to my understanding is not doable in current css.
Does someone have a NON-OBTRUSIVE way of achieving what I am looking for?
I'd love to achieve this look here,
without the title and misc stuff located in the top left of course. The idea would be to allow the adding of images anywhere in the markup and have it look correctly.
I dont care about browser support at this time, so - any solution is great!
Thanks in advance....
Erik
Without doing JavaScript hacks, I don’t believe there is any pure CSS way of doing this. There is the column-span property, which is supported by Opera (currently not in a public build), but it only has two values; none and all. The spec currently doesn’t allow you to specify the number of columns, which would be very useful. It’s something I’d love to see.
Maybe the column span property can help if you create an additional container for the image and set the column-span width to the cumulated width of the middle columns.
You could also make the middle column larger and remove the need for another column, so the text and the image will be nicely aligned, but at this step, it is design consideration.
http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns
Knock out the height and width img attributes - they're not needed - and use CSS max-width:100%;
There are some backwards compatibility issues (notably with IE), but they can be plugged with JS. This method is the future.
A useful related article with references:
http://www.ldexterldesign.co.uk/2010/10/99-css-problems-but-liquid-aint-one/
Best,
Instead of defining the number of column you could define their size to adjust to the size of pictures.
Or you can define a size for every column, then you add a css selectors on images for making them automatically resize depending the width of the column.
Something like that
.column{
columns: 12em;
}
.column img{
width: 10em;
}
This is not exact answer to your question but at least there is possibility to wrap text around the image inside one column. Check "Example X" from here.