Skip to content Skip to sidebar Skip to footer
Home / Css / Css Multicolumn Layout / Html

Why Does A 3 Column Layout Fail So Hard?

Post a Comment
In the first snippet, you should see 4 images grouped to just the left 2 columns: [+][+][  ] [+][+] and not spread across all 3 columns as I would have expected: [+][+][+] [+]

Solution 1:

(edit: added some more examples)

CSS column-count means that the content is put first into the first row (below each other), then into the second column and then into the third (and so forth, if there are more). I.e. a vertically oriented order of placement.

The height of the containing element (in your case the p tag) is dynamically determined by the content - the content is split evenly across all columns as much as possible, which in your case isn't really possible - 4 images in three columns, threfore the uneven distribution of content. Look at this variation of your fiddle, where I made the fourth image a bit higher, causing the fourth image to go into the third column: https://jsfiddle.net/r002yvv3/

Try to use six images, then you'll see what I mean. (https://jsfiddle.net/f7k4fph2/1/). You see that even better if you just use some text, see this example: https://jsfiddle.net/p00syos5/

For what you want to achieve you better use float:left on the images instead of column-count in the paragraph. (https://jsfiddle.net/euuvf00z/1/) But in this case the heights should match...

And one more note: In real life you wouldn't assign the column properties to a p tag, but to a div container into which you put p blocks, images etc: https://jsfiddle.net/ygpk8pkc/

Solution 2:

U can try something like this:

<html><head><style>p{
			    -moz-column-count: 3;
			    column-count: 3;
			    -moz-column-gap: 0;
			    column-gap: 0;
			}

			img{
				float: left; /*add*/display: inline-block;
			    width: 100%;
			    height: auto;
			    vertical-align: top;
			    padding: 4px;
			    box-sizing: border-box;
			}

		</style></head><body><p><imgsrc="http://placehold.it/300x250"><imgsrc="http://placehold.it/300x300"><imgsrc="http://placehold.it/300x300"></p><p><imgsrc="http://placehold.it/300x250"></p></body></html>

Post a Comment for "Why Does A 3 Column Layout Fail So Hard?"