We Keep Coding

Aligning Columns - Flexbox

I'm currently using grid-x from XY grid built from Foundation (Zurb), although when I have a cards layout (as shown below) with grid-padding-x, one can see that the cards come centered (which is great), although I would like to put a sorting bar on top of this, aligning this to the card layout underneath proved to be difficult since the card layout adjusts accordingly.
What I would like to have as shown in the jsfiddle, is a fixed width and height of the cards and automatically centered (as fulfilled by using grid-padding-x) although then I would like to give the same margin to the navigation bar on top to be aligned to the cards (margin-left and margin-right)
Is there an easier way of achieving this? or is there a way to align them together?
JSFiddle: https://jsfiddle.net/7hjjt2Lp/
How am I expecting it to look

Probably the simplest way to achieve what I believe you are attempting is to put the navigation bar inside a .grid-x grid-padding-x as well. This alignment problem is one of the challenges of using a padding-based grid; you have to have everything inside the grid to align properly.
So in this case, you would end up with
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="sort-bar"></div>
</div>
</div>
You can see this in this fiddle: https://jsfiddle.net/7hjjt2Lp/2/
Alternatively, if you use margin instead of padding you don't have the same problem. You could shift to using margin grid and no longer need to nest your sort-bar... for that solution just shift your grid-padding-x to grid-margin-x. See https://jsfiddle.net/uy5euxc8/1/

DOM node Coordinate while HTML rendering

I use Chrome and http://www.aaai.org/Conferences/AAAI/aaai13.php for test.
There is a structure like that.
<div class="content">
<div class="right">...</div>
<div class="left">...</div>
</div>
I just have no idea about why the "content" div's size is 940px * 70px which is much smaller than the size of the "right" div and the "left" div.
Sorry for not knowing how to screenshot for this problem

Elements which are floating doesn't use vertical space without clear. You can add empty element with "clear: both"-css to use that vertical space.
See more info from here:
What methods of ‘clearfix’ can I use?

row-fluid vs row in twitter bootstrap

I have a container-fluid container element, and have been using row as opposed to row-fluid, admittedly out of ignorance. Now I am trying to replace the row class with row-fluid class, but have run into some questions. First, I looked at how the row-fluid width is defined in the .less, and it's completely hieroglyphic to me, so would anyone care to explain? More importantly, when I replace row with row-fluid, the height of the element collapses to 0 requiring me to include the .clearfix class in order for the row-fluid element to grow to contain its children columns. Why is this necessary, i.e. what is being floated and why when I replace row with row-fluid?

It depends on what elements you want to know the width of. The row-fluid class itself has a width of 100%. The spans (or columns) have a relative width, set up in such a way that it combines to 100.
On the floating: all columns get floated, this is what makes it fluid. The only height related thing that a row-fluid does is setting min-height: 30px. This makes it by definition strange that anything would collapse to a height of 0.
I'd suspect the styling you've done on top of your old grid is what causes your main problems.

This is what twitter bootstrap says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Well, that is about container not rows, but if that explanation is not enough for you, then this is the short explanation which should make things clear for you.
NOTE: If its version 2, then row-fluid itself is being float: left which would need to be cleared as you say.
This is because Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.
Hope this helps :)

Bootstrap 2.x to 3.0 class change
Bootstrap 2.x-->.row-fluid and Bootstrap 3.0 -->.row

Dynamically generated “floating divs” with even width but not even heights, align issue

I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9

Have you considered using something like Masonry?

Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This

Automatically collapsing vertical spacing between posts in grid theme

I'm trying to make a custom grid-based theme for my wordpress site. One thing I want to do is make it so that the vertical spacing between posts in the same column is automatically collapsed, so that there is no empty space between them even if the posts are different heights.
For example, on this site the grid is collapsing how I want it to. However, on this site, the posts are arranged in horiztonally aligned rows and there are spaces between each row.
Is there a name for the technique that is used to make posts arrange themselves as in the first example site? I'm at least looking for a term that I could Google for to learn how to do it ... but even better would be a code sample that would show how to make a grid that auto-arranges in this manner.
Thanks!

This is known as a dynamic grid or perhaps Pinterest-like grid. It was popularized by Pinterest.
Essentially, you cannot do this with CSS and HTML alone. This type of grid needs to be handled with some Javascript or server-side processing. I would suggest going with Javascript and checking out one of the many jQuery plugins which do exactly what you want (note that the first site you linked to uses a plugin for their layout):
http://masonry.desandro.com/ (what the first site you linked to uses)
http://www.wookmark.com/jquery-plugin
http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
http://yconst.com/web/freetile/
Any of these should do the trick.
Masonry has you set the container width and spacing between blocks using CSS. You specify the width of columns you want in Javascript. The calculation of the block width and spacing will determine how many columns there are in the container.
Wookmark and BlocksIt have similar configuration options. They let you specify the container width and then the block width. Between that and the offset (distance between blocks) you could have it arranged such that you end up with 3 columns of the same width.
Freetile out of the box doesn't support same-width columns (one of its features), however you would be able to accomplish the same thing with a little CSS and/or modifying the plugin directly.
The main part here is getting one of these plugins set up and working. Once that is in place, you'd only need to adjust your CSS to your liking. Each of these plugins provide working examples as well as code samples and documentation. A simple implementation of Masonry would look like this:
HTML:
<div id="grid-container">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
</div>
CSS:
#grid-container {
width: 940px; //width of your container
}
.post {
margin: 10px; //spacing between each block/post
}
Javascript:
$('#grid-container').masonry({
itemSelector: '.post', //selector for each block
columnWidth: 300 //width of your columns
});
Each block post will be 300px wide with 10px of margin all around. You'll end up with 3 columns, each column with 10px of margin between them.
Each of the plugins listed is licensed in such a way that it's free for personal/commercial use (see each plugin for their respective licensing), so no worries there.