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

Having CSS aligning issues

Luxus

Well-known member
#1
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?
 

Attachments

Luxus

Well-known member
#4
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

Well-known member
#5
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

Well-known member
#6
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-known member
#7
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.
 

Luxus

Well-known member
#9
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:

PHP:
.class {
    display: inline-block;
}
This works on all major browsers but IE7. For IE7 you need a hack, resulting in this code:

PHP:
.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

Well-known member
#10
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
 

MagnusB

Well-known member
#11
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;