putting blocks of nav side by side vertically - html

Question

I have Some dynamic size of nav with fix size of width: 25%; in a 100% page width.
<nav class="football fig1">
<header>Header</header>
<article>
<h3>P1</h3>
<img src="">
<p>This is a first News</p>
</article>
</nav>
you can see my code here.
because of dynamic length of nav, there is some blank space between P1 and P4. please help me to delete theme for all of blocks with css.
Also what is the problem with the code that 4 of blocks are not in a row?!

Answer 1

The reason you aren't fitting 4 divs across is because your display setting is inline-block. This creates some padding between the elements that you aren't in control of. Replace that with a float and all is solved:
nav {
display: block; <--this changed from inline-block
float: left; <--this line added
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
}
Now the divs are hard up against each other, consuming exactly 100% of the width. If you want a margin between you will need to factor that in, i.e.:
nav {
display: block;
float: left;
vertical-align: top;
margin-bottom: 4px;
overflow: hidden;
box-shadow: 0 0 2px #888;
margin-left: 0.5%;
margin-right: 0.5%;
}
Since I have added 1% of margin, you would adjust the width to 24% to compensate. If you don't want the half-margins on the left and right you will have to get creative with :last pseudo classes, or add a last-column class to it.
As to the other part of the question, I suspect that unless you restructure your code that they will always line up at the top (I could be wrong). You could combat this by re-ordering the divs if you know that there will always be 4 across:
<div class='container-col'>
<div id='col1'></div>
<div id='col5'></div>
</div>
<div class='container-col'>
<div id='col2'></div>
<div id='col6'></div>
</div>
<div class='container-col'>
<div id='col3'></div>
<div id='col7'></div>
</div>
<div class='container-col'>
<div id='col4'></div>
<div id='col8'></div>
</div>
CSS:
.container-col {
float: left;
}
So now we have 4 vertical columns floated side-by-side, and the divs will stack with no space between them vertically. Here is a fiddle showing the result, which keeps the margins too.