Search code examples
csslayoutpositioning

Positioning three list elements - 2 and 3 directly below 1

I'd like to position these three list items so that they both float to the right of the page and item 1 sits directly above items 2 and 3.

This is the html bit:

<div class="header-text">
    <div class="header-contact">
         <ul class="header-contact-list">
                            <li><a href="">item 1</a></li>
                            <li><a href="">item 2</a></li>
                            <li><a href="">item 3</a></li>
         </ul>
</div>

</div>

Currently, they all float to the right as I've added float: right to list elements (interestingly, item 1 is the farthest right, then item 2, then 3), however, they are still on the same line. What am I missing? I cannot cheat my way out of this with padding-right as I will need to change its colors as well.

Solution

  • Not sure if I understand your question, but if you want to align the list to the right with item 1 on one row and item 2 and 3 on the next row, this is how you could do it.

    Add display: inline-block; to items 2 and 3:

    .header-contact-list li:not(:first-of-type) {
   display: inline-block;
}

    and add float: right; to .header-contact