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)
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 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.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
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
Does anyone know how to put multiple div (box) with multiple size in the big container to let blank space only in the bottom of the container ?
Here is a representation of what i want:
Here is what I have:
Thanks!
It sounds like you're trying to fit multiple containers of various sizes into a single container with a known size to get the best fit you can. JQuery masonry is perfect for that, if you're willing to use jQuery, though there is no guarantee that it would leave all of the blank space at the bottom.
Documentation here: http://masonry.desandro.com/
Demo here: http://masonry.desandro.com/demos/basic-single-column.html
And you can set gutterWidth to 0 to take out all space between columns. http://masonry.desandro.com/docs/options.html
Without more information (your current code, a diagram, a sample website), I'm not really sure what you're asking here. If you're just looking to add bottom spacing to a container, try using CSS with padding-bottom?
Do you mean somethink like http://jsfiddle.net/ZFdHz/ ??