How remove vertical spacing between li css - css

Question

I have this html code and style "this is just an example":
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
<style type="text/css">
#mn, #mn div { display:inline-block; vertical-align:middle; }
#mn div { width:350px; margin:5px; /* float:left Comment */ }
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999 }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
</style>
The problem is, the element on left "the yellow and red ones" have a big space or bottom margin between these.
I need delete this big margin or spacing and use just 5px in all element.
I created a script with jquery that take the List and move them to a divs, something like that:
<div id="mn_left"></div>
<div id="mn_right"></div>
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
$(document).ready(function () {
$("div", "#mn").each(function (e, value) {
if ($("#mn_left").height() <= $("#mn_right").height()) {
$("#mn_left").append(value.outerHTML);
}
else {
$("#mn_right").append(value.outerHTML);
}
});
});
The script works fine, but I want to do it without scripts.
Edit...
I mistook, I changed the li by divs... But it's exactly the same. The Html Looks Like that:
http://postimg.org/image/dh6dwdjc1/
What I really want is this
http://postimg.org/image/otnkrwhep/

Answer 1

First off, here is your code properly set up using list markup, since you said it's a list:
HTML:
<ul id="mn">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="fourth">4</li>
</ul>
CSS:
#mn {padding:0; margin:0;}
#mn, #mn li { display:inline-block; vertical-align:middle; }
#mn li { width:350px; margin:5px; }
li.first { height:5px; background-color:Red; }
li.second { height:120px; background-color:#999 }
li.third { height:50px; background-color:Yellow }
li.fourth { height:180px; background-color:#ccc }
(JSFiddle Link 1)
Then, remove the margin from #mn li:
#mn li { width:350px; /* margin:5px; */ }
(JSFiddle Link2 )
You'll see the list items are flush now, except the first item, where the line height is taller than the item height. To fix that first one, give the list items an overflow:hidden; and change the display from inline-block to just block.
#mn, #mn li { display:block; vertical-align:middle; }
#mn li { width:350px; overflow: hidden;}
(JSFiddle Link 3)
That should be it for you, unless I've misunderstood.

Answer 2

Now that I understand what you're trying to do...
One way to do that is to create a class for the items that will be in the second colum:
#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;}
JSFiddle Example. (PS, You need #mn{position:relative;} for the above to work.)
The problem with this is that if you have more than one item in the second column, you'll have to give the second (and third, fourth, etc) items a custom top position so that they line up properly.
This seems like a perfect place to use Javascript instead of CSS. And that's coming from a proponent of "always use CSS whenever you can!"

Answer 3

How about this? Using floats instead of absolute positioning.
#mn {width: 720px;}
#mn div { width:350px; float:left; margin:5px; }
#mn div.second {float:right;}
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999; }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
Floated all to left.
Added a new CSS rule for the containing div of
#mn. The width is equal to the width of each child div plus it's
margins, so ( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px.
Added new CSS declaration for the second div.