Develop Reference

Overlapping Masonry with 100% height item

I'm trying to build a layout with a 100% height section - the twist is that this is a Masonry layout, and the first Masonry item is the 100% height/width of the page on load (& responsive).
Following the 100% height item, I want to have 'regular' masonry (columns, rows, etc. etc.)
The problem I'm having is that the first item .grid-item grid-item--feature is overlapping with the other items. I've had this before with ImagesLoaded, but never with an 'empty' grid.
I'm picking this back up after a month and probably overlooking something really simple but I've put together a little JS Fiddle here. How can I fix this issue?

Try this code :
.grid-item-feature { position: relative; height: 100vh;}
See this fiddle
Explanation of the use of vh :
With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects
1/100th the width of the viewport. To make an element the full height
of the viewport, for example, you'd set it to height:100vh.

a function to adjust spacing between paragraph to fill the div height

What I have is a div with some items (menu item), this div will be the height of the browser viewer and I would like the spacing between the <p> to fill the height of the div.
So for a 1024px screen sixe, 20 px spacing is fine between paragraph, but sometimes it better to be 17px and for some big screen, 22 px should be fine.
Do you have a javascript function to auto calculate this or a jQuery plugin ?

there is a newish css module called flexbox. check this out.
basically set the container height to 100%, and set the elements each to flex:1 1 auto.
play around with that URL too
more info:
here is a jsfiddle. it's rudimentary but demonstrates the basic idea. just set the height of .flex-container to 100% when you put it in on your page. (i have the fiddle set to 400px because 100% doesn't grab the result-frame height in a jsfiddle.)
the CSS looks daunting because a lot has to be vendor-prefixed but it's actually quite simple.

If I understand you correctly, you are looking to modify the margin of p tags based on height of parent div - maybe something like this would help
MAX = 200;
if ($('div').height() > MAX) {
$('p').attr('style', 'margin:10px 0 10px 0;')
} else {
$('p').attr('style', 'margin:0 0 0 0;')
}

Create rounded block without border-radius

I create my own website and I can't understand how correctly create rounded block (see red rectangle in the picture here: https://dl.dropboxusercontent.com/u/43315655/planeto-template.jpg)
This block will be display at different screens (from 960 px to HD). I have tried to do with border-radius but it's wrong.
Please, help me with any links, advice or code examples :)

The image you posted is an HTML template. If they did it, don'T you think it is possible?
It is, just put a border on bottom left and bottom right. One value is 100% and the other is the height you want the curve to stop :
border-bottom-right-radius : 100% 100px;
border-bottom-left-radius : 100% 100px;
Fiddle : http://jsfiddle.net/yqf9a/1/

I'm not quite sure what you don't understand about border-radius, but the W3C Wiki explains the use of the border-radius property pretty good: http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Also try the CSS Border Radius Generator: http://border-radius.com/

How to force image to have even height

Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/

CSS: Two column Div layout misaligns when Zoom changes

Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/

To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...

your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}