Center Only Comments MySpace

Centering Comments while Keeping default friend space to the right.

I have 4 solutions. Each one has different limitations, and in almost all cases the person applying the code must adjust the pixel (px) values based on their own page (and again when changing the page).

The solution which works the best for you depends on how your page is laid out, and what side effects you are willing to accept.

To Determine which solution to use, refer to below chart.
Consistent, as used in the below, means Consistent across the different browsers, resolutions, dpi settings you expect your page to be viewed.

A: Distance from Top of Page to Bottom of Left Column. I see no need for a solution which uses this distance. It is so rarely consistent and NEVER smaller or more consistent than B. I replaced all use of distance A with a solution which uses Distance B. B: Distance From Top of Comment Space to Bottom of Left Column. I use this distance in solutions 1 AND 2. Solution 1 does NOT allow me to widen the comment table to more than 475px. IF you do NOT WANT TO WIDEN your comment table, and distance B is small (zero or negative), AND you want to keep your bottom links OR you are using a background color for your main table; Then solution 1 should work well for you. IF you do want to widen your comment space, AND do not mind removing your bottom links AND have made the main table background transparent; then Solution 2 is a better choice. C: Distance from Bottom of Left Column to Bottom of Blurbs. Solution 3 Uses this distance. IF you want to widen your comment table AND (Keep Your bottom links OR have a background color for your main table) AND distance C is consistent this may be your best solution. D: Distance from Top of Page to Bottom of Blurbs. I use this distance in solution 4. IF you can make Distance D consistent, then this is a good choice. This does allow you to keep your bottom links, and background coloring to the main table.

Solution 1
This one is dependent on Distance B.

Negatives:
Can not widen the comment space wider than 475px without messing up page alignment

Positives:
Less dependent on measurement (for relative or absolute placement) over areas which vary a lot in px size between browsers, resolutions, dpi settings etc ...

IF YOU DO NOT WANT TO WIDEN THE COMMENT AREA THIS IS USUALLY THE BEST SOLUTION.

This solution uses relative placement to shift the comment table to the left AND down (if needed). The distance Down is the distance shown as B in the picture.
Insure you shift it down, enough to accommodate the different browsers and resolutions you expect your page to be viewed.

<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed.  This is distance B on the chart-!}
table.friendscomments {position:relative; right:180px; top:5px;}
table.friendscomments {width:475px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>

You can try increasing the width of table.friendscomments.
As you do, you will notice the following:
- In IE it shifts the whole profile to the left.
- In FF it shifts the left column to the left, widening the gap between the right and left columns.

Solution 2 (Modified to use Distance B instead of Distance A. Thanks to Ralf for making me aware that absolute positioning could be used without setting a top value or changing the vertical position of the element).

Use absolute placement to move the comments horizontally only; maintaining their current vertical position.
IF distance B is positive, create a top margin in the comment space, equal to or greater than distance B.


Negatives:
Requires that the bottom links be removed. WARNING: I have recently learned that some profiles are being deleted due to hiding the bottom links. For this solution I recommend AGAINST hiding the bottom links. I will have new code for this soon.

If you have used background coloring for your main table, you comment space will now stick out below that table, giving an "off" appearance. However, you can fix this by using the body background color which is the same.

Positives:
This strategy takes far less code than 3 or 4.
This strategy relies on Distance B, which is usually the smallest and most consistent of all the distance choices.
If your friend space (or other content in your right column) grows, it will automatically push the comment space down to accommodate.
Logically removes the comments from right column, so they can be made wider without distorting the page alignment.

Preparation:
Measure Distance B.
If it is negative, and you expect it to remain negative, then no use of this distance is required
If it is positive, you will need to use this as a top margin to the comment space.
I have this values shown in Bold, in the below code.
Set it to 0 if your value for B is Zero or negative.

<style>
{!-use top-margin to move comments down distance B -!}
table.friendsComments {margin-top:255px;}
{!-Move comments to center and widen-!}
table.friendsComments {position:absolute; left:50%; margin-left:-350px; width:700px !important}
{!-widen sub-tables in comment space-!}
table.friendsComments table, table.friendsComments td {width:700px !important}
{!-adjust td level which holds actual comment-!}
table.friendsComments table table td {width:auto !important}
{!-remove bottom links-!}
table div {display:none;}
{!-restore ad banner and main content divs-!}
div table div, table table div {display:block}
</style>

[Solution 3 Pending]

Solution 4 This strategy relies on distance D.

First move the entire block (Friends, comments, calendar) to the bottom center. I do this by closing tables (and re-opening them to maintain balance). This causes the section to fall into place, just underneath the bottom of the left column, and above the bottom links.
Next I use absolute placement to move the friends (and calendar if you have one) back to their original location. This causes the comment section to move up and place itself directly under then left column and just above the bottom links.

To determine the absolute placement for the friendspace measure distance D (as shown in the picture). My values ranged from 733px to 800px (using 2 computers, both IE and FF on each computer, with different resolution and dpi settings).
Because I have enough space in distance C (see picture) for my friendspace to fit, while allowing enough space to accommodate variance among the different computers/settings, this solution works pretty well for me.

I use 808px (to allow an 8px top margin).

Place this code at the bottom of the "To Meet" section. Modify the value shown in bold to suit your profile.

<span class="off">!-Start Code To Center Comments-!
!- First Center the whole block, friends and comments-!</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<table class="myTclassFC"><tr><td>
<table class="off"><tr><td>
<table><tr><td>
<span class="off">!-Start style block to go with center comments-!</span>
<style>
{!-remove carriage returns between friend and comment tables-!}
table.myTclassFC br {display:none}
table.myTclassFC table br {display:block;}
{!-move friends back to their location on the right-!}
{!-the value of top is distance D shown in the picture-!}
table.myTclassFC table.friendspace {position:absolute; top:808px; left:50%; margin-left:-50px; _margin-left:-60px;}
{!-Adjust the top px value in the below line IF the length of your friends space is longer than length C in the picture. -!}
table.friendscomments {position:relative; top:0px; left:0px;}
{!-Increase width of comment table-!}
table.friendsComments {width:800px !important;}
table.friendsComments td, table.friendsComments table {width:100% !important}
.friendsComments table table td {width:auto !important;}
{!-Control size of pictures and links in comments -!}
table.friendsComments table table td img {max-width:100%;}
</style>
<span class="off">!-END block to center comments-!</span>

Results:

Computer 1 FF	Computer 2 IE different resolution and dpi

Same solution as above, but with a calendar
If you used the solution above (solution 4), and you had a calendar showing, it is probably now sitting just above your comments (bottom center).

You can use the same technique to move the calendar that was used to move the friends.
The calendar does NOT have its own class, but it is the only table, at this level:
myTclassFC table
Which does not have its own class.
Therefore I can address it this way, and then reverse the effect at levels
myTclassFC table.friendsComments
myTclassFC table.friendSpace

Now it is easier to see why I used the class, and explicitly specified it when I moved the friendSpace.

Look at the following page:Page showing Comments Bottom Center and Calendar Top Right

To make this layout work, I choose to keep, on the right side of the profile, only those items which sized consistently in the multiple browsers, resolutions, and dpi settings I was using. Anything that has the size defined, based only on px values, will do this.
I moved my Blurbs (About Me) to the Left Column. I replaced my Blogs with a picture.
I then turned my Extended network invisible {visibility:hidden}, to make room for my calendar.

I then pasted in this style block (it can go almost anywhere, I put it at the bottom of my meet section, just below the style block for centering comments:

<span class="off">!<style>
{!-move Calendar Top Right in place of Extended Network-!}
.extendedNetwork {visibility:hidden;}
.myTclassFC table {position:absolute; left:50%; top:165px;  margin-left:-50px; _margin-left:-60; border:3px silver solid}

{! maintain static position of other stuff effected by above !}
.myTclassFC table.friendscomments, .myTclassFC table table  {position:relative !important; top:0px; left:0px; margin-left:0px; border:none;}

{!- no code required here for table.friendSpace only because we have already positioned it-!}
</style>

[Note: All of the above assume the left column is longer than the distance from the top of the page to the bottom of the blurbs (the right column minus friends and comments). If this is NOT the case, then you may want to consider a layout more like this:
Friend And Comments Side by Side
or This
Center Friends and Comments]

Thank you for visiting, have a nice day

codes ? Is not code plural already? Prior to myspace I had never seen the word code pluralized to codes, when discussing software source code (or is it source codes?)
Center friends comments only
Can I center my comments on myspace, Yes
You can center friends comment table without centering friends
Center comments without hiding bottom links
center comments show bottom links