Varying Formatting on Same <th>

[cptk]

Say I have the following:

<tr>
<th class=cMyT colspan=2>My Title</th>
</tr>

This places "My Title" in the center of the two column. But, what if I want to put some additional text (e.g. - last mod date) on the same row, but up against the right side and still maintain "My Title" in the center of the two columns. How's this done?
...thanks!!!

 

[Vragabond]

You could float it. Put it in a div on its own and give that div a width and float it to the right:

<tr>
<th class="cMyT" colspan="2"><div style="width: 20%; float: right;">last mod date</div>My Title</th>
</tr>

It will likely need some visual tweaking.

 

[cptk]

How about using the z-index - which is better? If the two item "elements" within the <th> are never intended to overlap, then would this method suffice?

 

[Vragabond]

z-index is a stacking order of where elements appear between the screen and user. An element with higher z-index will appear closer to the user than element with a lower z-index thus covering it. It has nothing to do with your problem. Floating however, will make sure your two elements never overlap.

 

[cptk]

...thanks Vragabond ! I will give the float a try come Monday.

 

[cptk]

The float does the trick, however I have the "tweaking" issue now.

How can I best get the original title centered back over my two columns and still have the "float" text on the same row?

margin-left doesn't do the trick ...

 

[cptk]

My Objective: Two column table, applying two different styles to a <th> row with two text elements: Right-align text "Last Mod Date" and center "My Title" over both columns (as if the other element, i.e. - Last Mod Date, wasn't there).

No matter what combinations I use for the cSite style (i.e. - changing text-align to center,left,or right and/or using margin left or right) I can't seem to get the margins to even be applied for the cSite style!!

I was thinking for my cSite style I could text-align:left and apply a margin-left xxpx to "My Title" to effectively "tweak-over" the title to the center of the two columns.

EXAMPLE:
...in my style definitions I have the following:

.cSite {
text-align:left;
margin-left: 30px;
}
.cDate {
float:right;
text-align:right;
margin-right:3px;
}

...then in my <th> I have ...

<th class=cSite colspan=2><div class=cDate>Last Mod Date:<br>$LMD</div>My Title</th>

..Why won't the margins for cSite work? It's as if they are being ignored!

...Thanks for any insight !!!

 

[Vragabond]

If you want to act "as if that other element is not there" you need to use absolute positioning. That is the only way you can have the text in without other text minding it. Put your cDate in absolute position on the right. Make sure the th is positioned relatively so that it will act as a parent element to cDate's coordinates. Then put cSite in a div with margins left and right set to auto (this will center the element) and making sure its size does not overimpose the absolutely positioned cDate. If you need to further control the centerness of text within the cSite div, give it text-align: center;

 

[cptk]

for my cDate style, I used ...
position:absolute;
right: xxpx;

This did the trick ... thanks!

Out of curiosity, why didn't "float" work?

 

[Vragabond]

Floated elements still take up space, and as such your text was centered in all of the space remaining. Since portion of the space was taken by the floated div, the title was shifted further left than you wanted. Absolutely positioned elements however do not interfere with other elements on the page. They do not interact in any way and as such do not mix up your layout. It is good to know how certain states behave so that you know when to use them.

 

[cptk]

...very strange ...

The <th> row displays as desired in my 1st table, but with my subsequent tables' <th> row (I'm dynamically building tables via a loop), for some reason the cDate position is shifted farther left then the 1st table <th> row. The position for the subsequent table's <th> rows are all the same, however this position is not the same as the 1st tables' <th> row.

 

[cptk]

Well, using position:absolute at first seemed to resolve my initial problem (i.e. - 2 text elements on same row, but center 1st element over "both" columns), until I widen my browser. The right text element stays "fixed" on the screen, sometimes off my table. This obviously is not what I want.

So I've tried "float", "z-index" I'm told is not an option, and "position:absolute" while at first seems to be the answer, is not.

How do I get two text elements on the same row, but have the 1st text element centered over both columns?

 

[cptk]

My final solution:

I went back to using "float" in my defined CSS class for my right text element, but the key was I also put the desired centered "My Title" text element within a <div> with it's own class. Within this class is where I did the orignal recommended "tweaking" where I used the margin-left:##px; to reposition "My Title" to the center of the two columns.

.cSite {
text-align:center;
margin-left:112px;
}
.cDate {
float:right;
text-align:right;
margin-right:3px;
}

<th colspan=2><div class=cDate>Last Mod Date:<br>$LMD</div><div class=cSite>My Title</div></th>