Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    44
    Thanks
    8
    Thanked 0 Times in 0 Posts

    links that wrap over two lines

    Hi all,

    I want to write a list of links like this ie where some links (highlighted in red) wrap over two lines. So if the space of the container allows, “New” would be on the first line and “York” would be on the second line ie rather than both words being pushed to the second line.

    On my test page – the links are floated left – the first line has room for “New” but it is being pushed down to the second line.

    Any ideas please?

    Thanks…

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,713
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Your link to your site does not work. Anchors should normally split like that without any special treatment.
    Here's an example. Remove the border and put this inside another div that will emulate the box in your example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
        width:200px;
        height:80px;
        display:table;
        margin:0 auto;
        padding:0;
        list-style:none;
        background: white;
    	border: 1px solid gray;
    }
    li {
       display: inline;
       padding-right: 10px;
    }
    </style>
    </head>
    
    <body>
    <ul id="demo">
        <li><a href="#">Mississippi</a></li>
        <li><a href="#">California</a></li>
        <li><a href="#">Idaho</a></li>
        <li><a href="#">New York</a></li>
        <li><a href="#">Oregon</a></li>
        <li><a href="#">Florida</a></li>
        <li><a href="#">North Carolina</a></li>
    </ul>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •