SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Vertical and Horizontal Alignment

    Hi Everyone,

    I'm trying to re-write a site that is based in tables around XHTML and CSS.

    The site has a header like this:

    |-------------------|
    |.......[Image].........|.......Text 1........................................Text 2
    |-------------------|

    (.'s indicate space because I can't get spaces to work for some reason, in this forum!)

    Basically, Text1 and Text2 are vertically centred to the image. Text1 is next to the image, while Text2 is on the right hand side of the page.

    I'm having extreme problems getting this to work in CSS, with 2 main problems:
    1. Vertically aligning the text in CSS
    2. Getting Text1 and Text2 to horizontally align correctly, while making them stay on the same line on the page.

    If anyone has a suggestion as to how I can get this working, it'd be great to hear from you!

    Thanks,

    Rich.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hey Rich,

    For vertically aligning one line of inline text, line-height may be used. For example:

    HTML Code:
    <p style="height: 50px; line-height: 50px;>
    Line of text here.
    </p>
    With #2, it really depends on the situation at hand. You could float two <div>'s, making them stay on the same line, like this:

    HTML Code:
    <img style="float: left;" />
    <div style="float: left; width: 200px; margin-left: 200px; display: inline;">
    Text
    </div>
    <div style="float: left; width: 200px;">
    Text
    </div>
    margin-left: 200px;, in the first <div>, provides 200px of space for the left image and display: inline;, is an IE6 "double-margin" fix.

    If you wish to center that <img /> in the 200px of space, you'll need to give it a left margin (margin-left: XXpx;), again, applying the IE fix, to move it from the left edge into the center.

    That's a pretty quick-n-dirty example, however, and it wouldn't apply to any situation, as I mentioned above. Over time, you'll learn what to do where, and it's really not as complicated as you may currently see it.

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Egor,

    Thanks for your suggestion!

    I've managed to get the result I want by merging your examples, as in the code below:

    HTML Code:
    <img border="0" src="image.png" width="153" height="48" style="float: left;" />
    <div style="float: left; display: inline; width: 350px"><p style="height: 50px; line-height: 50px;">Text1</p></div>
    <div style="float: right; width: 200px"><p style="height: 50px; line-height: 50px;">Text2</p></div>
    However, you'll notice that I had to add width statements to the two text div's. This is because otherwise, the Text2 div would go onto the next line, as (I guess) the Text1 div is taking up all of the rest of the line.

    This is fine in IE, visually, but it does create a problem when someone views the page in a narrow window - Text2 has to drop down to another line.
    So, do you know any way I can get the Text1 and Text2 div's to be only as wide as they need to be, to fit their text?

    Also (sorry!) the text doesn't appear vertically aligned in Firefox...perhaps I've messed with the code somewhere and broken it...

    Thanks a lot!!

    Rich.


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
  •