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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why does float right cause a line break?

    Hi there,

    I'm getting a line break before the <ul>. I want it to be on the same line as the link on the left.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <div id="main">    
    
    <div id="imageNavigation">
        <div id="viewAllContainer">
            <a href="/archives/selector.aspx?page=0">VIEW ALL (174)</a>
        </div>
        <ul style="float:right;"><li style="display: inline;">1</li><li style="display: inline;">2</li></ul>
    </div>
    
            </div>
    </body>
    </html>
    Any ideas?

    Cheers, Ian.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello IanIan,
    It's not really a line break. You have your View All link it it's own div. To see what's really going on, give #viewALLContainer a background color.

    Try it like this once instead -
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #imageNavigation {background: #ccc;}
    ul {margin: 0;float: right;}
    li {display: inline;}
    </style>
    </head>
    <body>
        <div id="main">   
            <div id="imageNavigation">
                	<a href="/archives/selector.aspx?page=0">VIEW ALL (174)</a>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    note, that margin: 0; is needed to remove the default 16px top and bottom margin on ul.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Soz... I was actually floating #imageNavigation left so that wasn't an issue.

    Setting the margin on the ul fixed it! Thanks!


  •  

    Posting Permissions

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