Best Technique to Position Text on the Right?

HTML & CSS
1

Hi Guys

Please see:

http://www.highlycreative.co.uk/test/css-layouts/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

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

Thanks Paul, here’s what I have now:

http://www.highlycreative.co.uk/test/css-layouts/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
  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.

  1. 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.

  1. 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.


#header p {margin-top:0;}
5

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.