I'm making blog template. In article/post list, i want to create layout like this, i don't know what name this layout, it's like notes in android version of Google Keep
I try to create the layout using simple box div with css float:left but the result is like this, there is a leave blank space when box change line, and the next box start horizontally in new line
So, is anyone knows how to make layout like that without using two column of div? or maybe there is any javascript plugin to solve?
This is a javascript solution, but have you thought of using something like Isotope or Masonry? http://isotope.metafizzy.co/
So, is anyone knows how to make layout like that without using two column of div?
It's a bit of feature abuse, but you can set the outer div to use text columns and then layout the inner divs in 2 columns with display: inline-block.
Column direction flexboxes won't fill the horizontal space automatically even if you allow them break because they only break if they are somehow constrained in that direction and height usually is not constrained in documents.
Related
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
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 an image page but can't figure out how to fill the gaps. I'm using float:left but that leaves some spaces blank.
You can find the image page here: http://ianbauters.no-ip.org/kinno/pages/images.html
Are you talking about this blank space?
It is normal behaviour of CSS floating. If you want to fill the gap you should use JavaScript library like Masonry or something similar.
A simple way is to divide your page into three and each episode take photos (without float)
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
I am trying to create the following layout with divs (every of them have a random fixed width and height):
http://i.stack.imgur.com/LJADe.png
So I was trying with the float parameter but it always ends up with the layout divided according to the highest height of a div:
http://i.stack.imgur.com/m6U96.png
Does someone know how to do this special layout without using absolute positioning, in order to keep the full liquid feature intact? It looks like a "div-cloud" or a "box2d-inversed-gravity-stack"
I don't think that is possible with CSS alone, but I could be wrong. You could use JavaScript to do it though.
I found a library called jQuery Masonry which looks like it does what you want. I haven't tried it but it might be worth looking into.