The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
Related
I'm having what would seem a very basic css problem that shouldn't be an issue. I have three divs:
(Output directly from firebug. Each div contains a lot of content and nested form partials (rails) so below is an abbreviation)
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Divs with class tf-attribute should have a boarder:
div.tf-attribute{
border: medium solid #a5ac20;
border-radius: 10px;
padding: 20px;
}
Strange thing is that the border is being applied to the div of class symegrid. When I use firebug to inspect the computed attributes of the symegrid div, no border is listed. If I take the border off of tf-attribute, the one arround symegrid disappears.
I doubt anyone would be able to give me a difinitive answer on this but I'm running out of ideas. Has anyone seen this sort of behavior before? Any ideas/thoughts would be appreciated.
In response to comments I've gotten:
It's been quite fairly suggested that I post a reproduction of the problem in a fiddle or something like that. I'm currently trying to reproduce this in a fiddle but can't so far. Will post it if I'm able to do so (though I suspect reproducing it would likely give me the info I need to solve the problem)
You having missing closing div tag
See the fiddle: "https://jsfiddle.net/s48o7kr1/"
The code becomes:
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
Change your html to
<div class="dynamic-container person">
<div class="symegrid"></div>
<div class="officer tf-attribute"></div>
<div class="director tf-attribute"></div>
</div>
So for some reason the div.officer.tf-attribute happened to be sizing itself to include the exact boundaries of div.symegrid, leaving its own contents below. Therefore div.symegrid only appeared to have a border and because the content of div.officer.tf-attribute was sandwitched between two bordered divs, it appeared to have a border itself. (Still can't get it to do that in a fiddle but whatever)
Anyway, all I needed was to add
div.tf-attribute{
overflow: hidden;
}
And it was all better. :-P Thanks to everyone who was so kind to spend their time on this nonsense.
I have a dynamic form of sorts that I'm laying out with a css flexbox. I'm using flex because I don't know until runtime how many or what type/width the components are in the form. I'd prefer for the first "column" to have left-aligned labels and every subsequent column to have right-aligned ones, but I can't really think of any way to do this. Any suggestions?
Basic example of this form (with everything right-aligned). Be sure to pull the divider left to make the rendered output as large as possible to see what the form looks like with more than just one column: http://jsfiddle.net/27Gfd/
//basic markup for one form component (called a row). See JS fiddle for more
<div class="container">
<div class="row"> //I might stack next to another "row" because I have fixed width based on component type
<div class="miniflex"> //I'm another flex container to layout label/input
<div class="label">Label 1</div>
<div class="input">
<input type="text" />
</div>
</div>
</div>
at the moment no, you can't
example pseudo code (just an idea, it doesn't work!)
.flexContainer::first-flex-line > div {}
.flexContainer::last-flex-line > div {}
.flexContainer::nth-flex-line(odd) {}
.flexContainer::nth-flex-line(3n+1) {}
this doesn't exist yet for a precise reason
.flexContainer::nth-flex-line(3n+1) > div {width:100%}
changing the size of the flex-items may affect the container's wrapping. so that's a circular loop. not a nice thing! :P
if you can think of a solution and you want it implemented you could ask to the CSSWG using the newsgroup, or even on chrome's and firefox's bug trackers
Change the css:
.ex3 .label{
text-align: right;
/* ... */
}
to:
.ex3 .label{
text-align: left;
/* ... */
}
Or, if you're not certain that the first column is a label, use:
.miniflex div:first-child {
text-align: left !important;
}
(You should probably avoid using !important but I can't offer a precise alternative without knowing the logic behind the markup.)
Or if you might have labels in places other than the first column
.ex3 .label:first-child {
text-align: left;
}
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }
Wondering if I can get some help here. In the fiddle I have most of the necessary markup.
http://jsfiddle.net/theDawckta/54z3J/
I cannot figure out how to make the columnItem in column 1 to extend to the bottom of the row. What I would like to see in column 1 is the green fill up the red row part while leaving the black content the same size.
I think it's impossible, so good luck, I have had enough of this.
I actually cut out quite a bit of your code, so apologies in advance if you needed those extra divs (but it shouldn't be too difficult to add them in later). Also, you may want to test this in IE--I'm not sure what version this cuts out on (but I think it works in IE7+).
HTML
<div class="row">
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
</div>
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
<div class="columnItem">
<p>Content</p>
</div>
</div>
</div>
CSS
.row {
overflow:hidden;
}
.column {
float:left;
width:50%;
padding-bottom:10000px;
margin-bottom:-10000px;
}
/* You can remove everything under this comment */
.columnItem {
padding:10px;
margin:5px;
background:blue;
}
.column:nth-of-type(1) {
background:yellow;
}
.column:nth-of-type(2) {
background:pink;
}
How it works
It's really quite simple. Each row hides everything past where the actual content is (with overflow:hidden; while each column pushes itself downward 10,000 pixels with padding-bottom:10000px;, and then back up again with margin-bottom:-10000px;. The number of pixels can be increased or decreased, just make sure it's large enough to fit your content.
P.S. - Anything is possible, the impossible just takes longer. ~ NSA
Omer Ben-Nahum suggested tables, but I'm not sure that is how you want to mark up your content. There really is no way to achieve this effect using CSS, but you can use some workarounds that give the site the appearance that you were able to get it to work. Look into using Faux Columns as an alternative to tables.
bfroh's solution is one i've used several times before, but in general I usually use a background image to emulate situations like this (where the content in one div isn't making it tall enough)
The wrapping container's background image could have the background color for the entire left div and just set that to 'repeat-y'
Dealing with these sort of issues (in my experience) either pretty much entails the hack that bfroh posted or a solution like this.
Hope it helped!
You cannot do it using css, but you can do this via javascript method.
I wouldn't recommend that because it means that you will have to run the script each time the content changes and I'm not sure you always know when it does.
If this issue is important to you, I suggest you use tables.
http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)