SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best Technique to Position Text on the Right?

    Hi Guys

    Please see:

    http://www.highlycreative.co.uk/test...uts/test5a.htm

    If I want to position the Abbey Motors address over on the right hand side of the header, with the paragraph of text itself still left aligned, what is the best technique to use? Should I create a new div or can I somehow do it with float?

    Many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you just float the p element to the right it will do what you and the text will still stay left aligned.

    It will align level with the image though except ie7 and under where it will start below the image but still to the right. If you want to support IE7 and under then change the order of the html so that the float comes first before the static image.

    You will also need to make sure that the header element contains the float which you could easily do with overflow:hidden on #header if you don't need visible overflow.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, here's what I have now:

    http://www.highlycreative.co.uk/test...uts/test5a.htm

    1) I have used inline CSS. Is that best, or would it be better to add an id to the paragraph and put it in the stylesheet?

    2) I added a width to the paragraph, in order to align it with the Aside Heading. Is that the right technique?

    3) The address appears to start one line down from the top of the logo on the left. How come? What can I do about that?

    Cheers

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    1) I have used inline CSS. Is that best, or would it be better to add an id to the paragraph and put it in the stylesheet?
    It is better to use classes rather than ids. Use ids when an object needs to be uniquely identified, such as the target (fragment identifier) of an on-page link or for a JavaScript call, otherwise, classes are better because they can appear more than once on a page and for reasons of specificity. id's seem to be popular these days, but there is no coding advantage for their increased use.

    Inline styles are the least recommended. Styles applied from a css sheet are preferred. Top-of-the-page styles get a nod for convenience and to override a rule on a css sheet.

    2) I added a width to the paragraph, in order to align it with the Aside Heading. Is that the right technique?
    What happens if the user decides to zoom his text (only) larger? Does the width applied to the paragraph hinder the readability of the content? Choice of technique usually depends on layout/design intent. Nowadays fixed widths are not always the best choices.

    3) The address appears to start one line down from the top of the logo on the left. How come? What can I do about that?
    Paragraphs have default vertical margins. You can remove the margin-top from the paragraph to bring it more in alignment with the image.
    Code:
    #header p {margin-top:0;}

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I've always used ids if I only need it once for no more that the simple reason it's less characters. Most these days seem to be going classes for most things. I'm torn somewhat. Not a big issue obviously I've just given it some thought lately. There are some I depth discussions on the matter around the web.


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
  •