Question

If the question doesn’t make complete sense, this might.

|----------------------------------------------|
|                                              |
|                                              |
|   IIIIIIIII IIIIIIIII IIIIIIIII IIIIIIIII    |   Main div holding for divs.
|                                              |
|                                              |
|----------------------------------------------|

Screen resized:

|------------------------------------|
|                                    |
|   IIIIIIIII IIIIIIIII IIIIIIIII    |
|                                    |    Divs get divided into 2 rows,
|   IIIIIIIII                        |    but still vertically aligned.
|                                    |
|------------------------------------|

Howwwww?
Thanks in advance!

---

Here’s the jsfiddle link

http://jsfiddle.net/mrpKV/

Resize the “result” are horizontally.
Lets assume that the height of a single row is 10px and the height of the container is 50px. When all the links can fit in a single row, the links should have 20px above them and 20px below them. When the window resizes and the boxes make two rows instead of one, both rows should still be in the center of the container div. e.g, having 15px on top and 15px on bottom. (if there is no margin between the 2 rows.

Better explained?

Answer 1

What if you tweak the top position of the menu? Like so:

#menu {
    float:right;
    margin:0 20px 0 0;
    width:50%;
    position:relative;
    top:10%;
}