Question

I have the following HTML & CSS

<div class="menus">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
    <a href="#">D</a>
    <a href="#">E</a>
    <a href="#">F</a>
</div>

.menus a
{
    height: 2em;
    display: inline;
    float: left;
    width: 4em;
    margin: 0.3em;
}

I’m trying to have the three first links at the top, and the last three at the bottom of the “menus” container, like so :

following the answer at HTML: Top and Bottom v-align in same container, I tried putting the first three and last three into their own containers, but then they lose their width

header .menus .firstThree
{
    position: absolute;
    top: 0;
}

header .menus .lastThree
{
    position: absolute;
    bottom: 0;
}

I even tried using :nth-child, but then they’re all stacked on top of each other 🙁

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

I need something like an absolute vertical position, but a relative horizontal one.. 🙂

Answer 1

I got it to work with :

header .menus a:nth-child(1),
header .menus a:nth-child(2),
header .menus a:nth-child(3)
{
    position: absolute;
    top: 0;
}

header .menus a:nth-child(2)
{
    margin-left: ...
}

header .menus a:nth-child(3)
{
    margin-left: ...
}

header .menus a:nth-child(4),
header .menus a:nth-child(5),
header .menus a:nth-child(6)
{
    position: absolute;
    bottom: 0;
}

header .menus a:nth-child(5)
{
    margin-left: ...
}

header .menus a:nth-child(6)
{
    margin-left: ...
}