1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Having CSS aligning issues

Discussion in 'Styling and Customization Questions' started by Luxus, May 11, 2012.

  1. Luxus

    Luxus Well-Known Member


    I am struggling to get the last post node align to the center.

    As you can see in the attachment if you disable forum descriptions via toolbox and your descriptions are longer than one line, the last post node as well as the forum icon remain at the top. I know you can correctly align it with tables, but I prefer not using tables for styling.

    Can anyone help me with this?

    Attached Files:

  2. mrGTB

    mrGTB Well-Known Member

    Does "vertical-align:middle;" not work.
  3. Luxus

    Luxus Well-Known Member

  4. Luxus

    Luxus Well-Known Member

    After investigating this further I realized that this cannot be done wthout using tables. So far any forums I have seen with aligned columns in the center are using tables. Am I correct with this?
  5. Luxus

    Luxus Well-Known Member

    Just want to update everyone that I have accomplished it. I basically did it with display: table-row, display: table-cell and position: relative. Now I could do this as well will html tables. Both methods have their own advantages and disadvantages, though. The major problem with CSS tables is that IE6 and IE7 don't support it.
    Why are people still using outdated browsers today? :/
  6. mrGTB

    mrGTB Well-Known Member

    Well, some of us still use Windows XP, I do! And the highest you can go with IE upgraded on it is IE7 unfortunately. So if people are using Windows XP and sticking with the default O/S browser, they will be using IE7. I never use it, I use FireFox all the time even though I've actually 5 browsers installed: Chrome, FireFox, Opera, IE7 and Safari.
  7. Luxus

    Luxus Well-Known Member

    Actually the highest you can go with WinXP is IE8, which supports CSS tables.
  8. mrGTB

    mrGTB Well-Known Member

    Sorry, your correct I do have IE8 installed. I never use it and thought it was stuck on IE7.
  9. Luxus

    Luxus Well-Known Member

    Again an update. Thanks to this site I was able to accompilsh my goal without html and CSS tables.
    I used a combination of display:inline-block and vertical-align: middle. Note that vertical-align: middle doesn't work on floated elements.

    inline-block does partially work with IE7.

    For instance, you have this CSS:

    .class {
    This works on all major browsers but IE7. For IE7 you need a hack, resulting in this code:

    .class {
    zoom1;  *displayinline;  /* IE7 Hack */
    This doesn't work with IE6, but I don't care about that brower and its users anymore.
  10. Luxus

    Luxus Well-Known Member

    Ok, I feel stupid. Really stupid.
    The easiest way to accompish this without any CSS hacks or tables is to use:

    top: 50%
    marigin-top: -half the height of the last post box

    Again thanks to the site linked above (I should have read further).
    Well, happy end I guess :p
  11. MagnusB

    MagnusB Well-Known Member

    You can use margin: auto to vertically align blocks, and horizontally too. I never remember which one does what, but you basically use margin: 0 auto; and margin: auto 0;
  12. Luxus

    Luxus Well-Known Member

    margin: 0 auto doesn't work with absolute positioning.

Share This Page