SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Steveiwonder's Avatar
    Join Date
    Nov 2008
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Layout, left & right!

    Hey Guys/Gals,

    I'm trying to get two things on the same line, one left & one right. This i thought would be easier than im finding.

    This is what i have...

    HTML Code:
    <div id="pagehead">
      <h1 class="pageheading">This is your page head!</h1>
      <a class="acc_lnk" href="myaccount.php">My Account</a>
    </div>
    The <h1> needs to be on the left & <a> on the right.
    This div does not have any text-align elements properties.
    I have got it in position, using float... but then the border-bottom on the <div> is not in place!

    I hope the above makes sense.

    Thanks

    /Steve

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Can you show us a short page of this happening? Try using overflow:hidden on the div. This is just a guess because we need to see the CSS.

    Cheers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    -- Can you paste your CSS (the relevant parts, relating to h1, a and .acc_lnk)
    -- You could try wrapping each element in its own SPAN, and floating the SPAN left and right

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi

    Can you show us a short page of this happening? Try using overflow:hidden on the div. This is just a guess because we need to see the CSS.

    Cheers.
    Yup, if you are floating your elements this should do the trick....

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If these are the only two items in the div pagehead, you don't need to give them classes, unless the classes are used elsewhere. In your css, you'd style them as follows:
    #pagehead h1 {
    the styles required
    }
    #pagehead a {
    the other styles required
    }

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what he is talking about.

    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS: Left and right on the same line</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .test{
     background:white;
     border:1px solid #000;
     color: #000000;
     font-size:x-large;
     text-align:right;
     margin:20px 0;
     padding:10px;
     white-space:nowrap;
    }
    .test span{float:left;width:5em;text-align:left;}
    </style>
    </head>
    <body>
    <p class="test"><span>left </span><img src="images/Search-Arrow-Rollover.jpg" width="12" height="15" alt ="arrow image" /></p>
    <p class="test"><span>left </span>Right</p>
    </body>
    </html>


    Paul O'B http://www.pmob.co.uk/temp/leftandright.htm developed this.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Zealot Steveiwonder's Avatar
    Join Date
    Nov 2008
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    I managed to get this working with BlakeAnthony's response, so thank you.

    And thanks to all else who replied.

    /Steve
    Last edited by Steveiwonder; Feb 11, 2009 at 04:20.


Bookmarks

Posting Permissions

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