I am trying to create a four column grid using the following code. The code is working perfectly in Chrome but its not creating the columns in firefox.
You can check the following code live here: http://jsfiddle.net/rfTXX/1/
I have checked this tutorial http://css-tricks.com/almanac/properties/c/columns/ and I think my codes are okay, but still its not working in firefox.
Could you please tell me how to fix the css so that it works in almost in every browser?
CSS
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 4;
column-gap: 15px;
column-fill: auto;
}
</style>
HTML
<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
Try without the column-fill property, it should work.
Or use -moz-column-fill: balance; instead.
Just to be on the safe side include -moz-column-count:"your value" in css
and include a java script document.getElementById("lstAccessList").style.MozColumnCount = "your value";
Trust me this worked for me after an exhaustive search.
The -moz-column-rule property is supported in Firefox from version 3.5.
http://help.dottoro.com/lcqjxgjq.php
remove column-fill and add -moz-columns:4;
it's work for me
Use -moz-column-fill:balance instead of -moz-column-fill:auto
Don't ask me why but it works for me!
Related
I am using Bootstrap 4 on my web page, which uses the bootstrap grid layout in flex mode.
In one of the columns I have a button that I want to fill the column. This is done by setting the button to 100% height using CSS.
This works without any problem in all browsers except Safari, where it seems to be ignored.
The html I'm using looks like this:
<div class="container">
<div class="row">
<div class="col-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius.
</div>
<div class="col-1">
<button class="btn btn-primary" type="button">Lorem ipsum</button>
</div>
</div>
</div>
In addition to regular bootstrap code I have added the following css:
button { height: 100%; }
Here is an codepen example that shows the issue http://codepen.io/anon/pen/BppMvw
Does anyone have any suggestion on how to solve this? Since the other columns in the row may be of variable hight, it's not possible for me to set a fixed height. Javascript is not an option either.
A solution might be to set flex:1 on the button and make its parent a flex container. See here.
I have the following code. Right now the Title is aligned vertical top of the image. But the description is still wrapping (blocked) below the image and I want it to also be top aligned, right under the title next to the image like the title is, but again below the title.
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="../../../Images/thumbs/206.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
</p>
<p class="vtop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
Try this
.vtop
{
display: inline-block;
vertical-align: top;
float: left;
margin-right: 20px;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
<div class="col-lg-9 well margin-top-5 padding-top-bottom-5">
<div class="row">
<div class="col-lg-12 well nopadding">
<p>
<img src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" class="vtop" />
<span class="bold inline-block">Title of Something</span>
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec. Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl. Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum magna et ligula consectetur lobortis.
</p>
</div>
</div>
It sounds like you're after the CSS concept called the media object. It's designed specifically for the scenario you mention; a layout as follows:
+---------+ ~~~~~~~~~~ ~~~~~
| |
| | ~~~~~ ~~~~~ ~~~~
| | ~~~~~~~~~ ~~~~~~
+---------+
You can achieve this with a basic structure:
<div class="media">
<img src="http://placehold.it/50x50" alt="" class="media__img" />
<div class="media__body">
<p>Title of Something.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed voluptate unde rerum quasi quidem, praesentium odio. Necessitatibus quo, non unde repudiandae adipisci, et corrupti eius ipsa, tempore ex aut.</p>
</div>
</div>
And just a few lines of CSS:
.media { display: block }
.media__img {
float: left;
margin-right: 24px
}
.media__body {
overflow: hidden;
display: block;
}
Here is a working fiddle to demonstrate.
You know there's always so many ways to solve problems. It seems to me it was a bit harder for me to understand what exactly was going on since you left out a lot of css info for the rest of the tags, but as far as I can see I feel like you're doing a lot of work to potentially do something quite simple. Hopefully that's not being to harsh I commend your efforts! I left your tags that aren't referenced in the css so it won't break you're code and you can paste it in easily.
All you need to do is float the image left .floatLeft and then create a div beside it with a margin-left to push the .content div containing the title/paragraph below out from the floated div since floats don't hold "real" space in the content flow of a web site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.vtop
{
display: inline-block;
vertical-align: top;
float: none;
}
.padding-top-bottom-5
{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nopadding
{
padding: 0 !important;
}
.inline-block
{
display: inline-block;
}
.floatLeft {
float:left;
}
.content {
margin-left:210px;
}
</style>
</head>
<body>
<div class="col-lg-9 well">
<div class="row">
<div class="col-lg-12 well nopadding">
<img class="floatLeft" src="http://www.lastmiracle.com/wp-content/uploads/10/The-engineering-in-Nature-200x200.jpg" />
<div class="content">
<p><span class="bold inline-block">Title of Something</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur fermentum velit, faucibus volutpat diam pretium nec.
Praesent quis congue mi. Donec a nibh efficitur, mollis purus at, elementum lorem. Praesent tempor pharetra felis, vel consectetur
lectus sodales nec. Suspendisse vel molestie dolor, id tincidunt eros. Mauris et turpis rutrum, sollicitudin augue nec, aliquet nisl.
Vestibulum mattis ipsum velit, et convallis est mattis porttitor. Morbi sit amet finibus risus, et maximus neque. Mauris fermentum
magna et ligula consectetur lobortis.</p>
</div>
</div>
</div>
</body>
</html>
I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.
I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/
Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:
"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"
So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:
"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"
Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).
Here's the sample CSS (with the "hacks"):
.item {
overflow: hidden;
margin-bottom: 20px;
}
.item img {
float:left;
margin-right: 10px;
}
.item p {
margin: 0;
overflow: hidden;
}
For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...
.item {
margin-bottom: 20px;
display: table;
}
.item img {
margin-right: 10px;
display: table-cell;
vertical-align: top;
}
.item p {
margin: 0;
display: table-cell;
vertical-align: top;
}
<div class="container">
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/150x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<img src="//placehold.it/100x200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
</div>
Fiddle version
Browser support is pretty universal - CANIUSE
I have noticed that IE 9 and below do not support multiple columns. However, I see this website not loading correct even with the latest Firefox - any idea what in this is preventing multiple columns?
Here is a CSSDesk of the below:
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
#media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
#media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
Remove the column-fill: auto; (vendor prefixed too)
Remove:
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
HTML (same)
body {
background: url(http://subtlepatterns.com/patterns/scribble_light.png);
}
#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 15px;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
}
#media (min-width: 960px) {
#columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
#media (min-width: 1100px) {
#columns {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
#columns:hover .pin:not(:hover) {
opacity: 0.4;
}
<div id="wrapper">
<div id="columns">
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
Morning,
Situation:
I am using CSS3 Columns to have responsive columns for ordering some pins.
The products in the columns will be ordered by rating (as you can see here: http://d.pr/i/iJPK ) horizontally. The first 3 get highlighted.
Problem:
CSS3 Columns order vertically by default, and i see no option to change this. The ordering needs to be horizontally, so i can highlight the first 3 + the other are horizontally arranged. The height needs to be variable too (thats why i used css3 columns)
What it looks like now in Chrome: http://d.pr/i/Vbqq
Fiddle of my situation:
http://jsfiddle.net/VXsAU/43/ these items are ordered VERTICALLY, i need them ordered HORIZONTALLY.
Possible workarounds with jquery are accepted.
This is my html:
<div id="list_all_burgers">
<div id="columns">
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi.
</p>
</div>
<div class="top_3_header"></div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue. Donec eu sem sit amet ligula
faucibus suscipit. Suspendisse rutrum turpis quis nunc
convallis quis aliquam mauris suscipit.
Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Nullam eget lectus augue.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Donec a fermentum nisi. Integer dolor est, commodo ut
sagittis vitae, egestas at augue. Suspendisse id nulla
ac urna vestibulum mattis.
</p>
</div>
<div class="pin">
<img src="images/burgers/burger_1.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed feugiat consectetur pellentesque. Nam ac elit risus,
ac blandit dui. Duis rutrum porta tortor ut convallis.
</p>
</div>
</div>
</div>
</div>
And this is my css: (sass notation)
#list_all_burgers{
margin-top: 9px;
margin-left: 15%;
height: 500px;
//background-color: rgba(yellow, .3);
overflow: auto;
#columns{
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
.top_3_header{
display: inline-block;
background: url('../images/list/burger_name_pat.png') repeat-x;
width: 100%;
height: 36px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
.pin{
display: inline-block;
background-color: rgba(0,0,0, .05);
margin-top: -2px;
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
img{
width: 100%;
padding-bottom: 15px;
margin-bottom: 5px;
}
}
}
}
Found a solution (hurray)
Masonry JS library did the trick for me.
MasonryJS link
Column CSS is not appropriate for the result you wish.
You can look for display:inline-block and text-align:justify.
http://jsfiddle.net/VXsAU/43/
ul.newslist {
width:98%;
background-color: #ccc;
padding: 16px 1% 0;
list-style: none;
text-align:justify;
}
ul.newslist:after {/* to justify last line too, add a virtual-one */
content:'';
display:inline-block;
width:100%;
}
ul.newslist > li {
border-top: 1px solid #000;
display:inline-block;
width:21%;
}
ul.newslist > li > a {
display: block;
padding: 4px;
background-color: #f6b;
text-decoration: none;
color: inherit;
}
EDIT: with itel different height: http://jsfiddle.net/GCyrillus/VXsAU/44/