How do I make my links not become on top of each other when the page is resized? I have them side by side but when the page is resized they start to pile on top of each other.

  • A staging link would be really helpful so we can see how you have coded your links. The correct answer really depends on that information. Help us help you. Abinadi Ayerdis over 9 years ago

2 answers

This was chosen as the best answer

Set a width on the div that these links are in. I'm also assuming that you're using an unordered list to display these links.

Here is an example of the CSS:

    width: 600px;
#links ul{
    list-style: none;
#links ul li{
    display: inline;
    margin-right: 10px;

And here is an example of the HTML:

<div id="links">
            <li><a href="#">This is link 1</a></li>
            <li><a href="#">This is link 2</a></li>
            <li><a href="#">This is link 3</a></li>
            <li><a href="#">This is link 4</a></li>
            <li><a href="#">This is link 5</a></li>
            <li><a href="#">And link 6</a></li>

After doing this you will be able to resize the window and the links will stay inline.

Answered over 9 years ago by David Leininger
  • In some situations a table layout is the best solution to support wrapping in each column and maintain backward-browser compatilibity. But this can be done as well with css. A list Apart has quite a few articles about elastic/3-even-column css positioning methods that will help if coding from scratch. :) Gary Hepting over 9 years ago
  • A table is only the best solution when tabular data is to be displayed... danwellman over 9 years ago

You can also give them a percentage width and overflow hidden (i would recommend text-overflow:ellipsis). Or, simply give the links a margin bottom so that when they do wrap they look ok. This is what I usually do.

Answered over 9 years ago by scott romack