Having CSS aligning issues

[Luxus]

Hi,

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?

 

[mrGTB]

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

 

[Luxus]

Nope.

 

[Luxus]

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?

 

[Luxus]

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? :/

 

[mrGTB]

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? :/

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.

 

[Luxus]

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.

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

 

[mrGTB]

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

 

[Luxus]

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 {
    display: inline-block;
}

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

.class {
    display: inline-block;
    zoom: 1;  *display: inline;  /* IE7 Hack */
}

This doesn't work with IE6, but I don't care about that brower and its users anymore.

 

[Luxus]

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

 

[MagnusB]

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;

 

[Luxus]

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