Vertical alignment of words

• 

  badgerkin · Member · Jan 10, 2015 at 8:55 pm

  • Copy link
  • Add topic to favorites

  I have a small coding problem.

  Am aiming for a paragraph, say:
  abc
  def
  ghi
  indented 200px. So far so good.

  But I also want to have a word, say, xyz, out in front of this paragraph, say at the left margin, but in the same line as the abc, i.e., not above it in a different paragraph.

  The following don’t work . . .

  <p style=”padding-left:200px;”><span style=”text-align:left;”>xyz</span>abc
  def
  ghj</p>
  _____________________

  <p style=”text-align:left;margin-bottom:0;”>xyz</p><p style=”padding-left:200px;margin-top:0;”>abc
  def
  ghj</p>

  Any ideas appreciated!

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jan 14, 2015 at 11:26 am

  • Copy link

  When you add padding to one block container element, such as the paragraph in your example, it applies to all of the inline content within that element, so that’s why adjusting the padding or alignment or margin of the xyz text in your examples is not getting the result you want.

  The best way I can think of to accomplish your goal would be to use absolute positioning.

  Here is a guide that I would recommend reading so you have a good understanding of how it works:
  http://css-tricks.com/absolute-positioning-inside-relative-positioning/

  Here is an adjusted HTML example that uses absolute positioning:

  <p style="position: relative; padding-left:200px;"><span style="position: absolute; left: 0;">xyz</span>abc
  def
  ghj</p>

• 

  badgerkin · Member · Jan 18, 2015 at 12:42 pm

  • Copy link

  Wow, it works! designsimply, that’s fantastic, thanks so much. Takes things to a whole new level for me :) I hope I’m ok sticking to the html rather than learning css, though I gather they’re not all that different. The link and comments also very helpful.

• 

  designsimply · Member · Jan 18, 2015 at 1:33 pm

  • Copy link

  CSS is pretty freaking cool. :) You might like:
  http://www.htmldog.com/guides/cssbeginner/
  http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

• 

  badgerkin · Member · Jan 24, 2015 at 2:23 pm

  • Copy link

  These sites are fantastic. I see that I’ve been sort of mixing html and css, a “whatever works” approach . . . which isn’t the most effective way to work with these things. Have started a proper html (for now) tutorial; looking forward to learning more. Thanks, design, for your help :)

• 

  designsimply · Member · Jan 26, 2015 at 4:31 pm

  • Copy link

  Glad you liked the links! I think the hands-on tutorial at codeacademy.com is particularly cool.