[headbirth]

Hi,

If I wanted to align the text defined by the class postInfo (below) to the right of the other text in that row, what's the best way to do this? Float; right works in Safari, but screws up in other browsers. Text-alignment doesn't seem to be capable of being over-ridden.

Possible or would I have to resort to using tables?


<a href="javascript:toggleID(300);" id="work01" class="boxNew">★ Candy Industry Magazine<span class="postInfo">Stagnito Communications: Art Direction, Design, Production</span></a>


.boxNew {
color: #3d3d3d;
font:bold 60%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-align: left;
text-transform:uppercase;
text-shadow: #ffffff 1px 1px 1px;
letter-spacing: .15em;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #ECFFA6;
border-left: 1px solid ECFFA6;
border-right: 1px solid #ECFFA6;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
margin-top: 0px;
margin-bottom: 0px;
background: #C3E26D repeat-x url(../Art/Navigation2/BoxGround_Green.jpg);
height: auto;
width: auto;
display: block;
}



.postInfo {
color: #333333;
font-size: 8px;
font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
text-shadow: #ffffff 1px 1px 1px;
letter-spacing: .15em;
text-transform: uppercase;
padding-left: 20px;
margin-bottom: 0px;
margin-top: 0px;
}

[Chris O'Brien]

Someone will come up with a better way, I should think, but you could do it by setting boxNew's position to relative and then postInfo to have position: absolute; right: 0;

Seems a bit hacky and you'll probably have to specify widths etc, but it should work... maybe...

[headbirth]

Do web designers normally deal with this by using a table?

[AppleOptionFour]

Not sure if this answers your question or not:

Could you have them float in the same z-index and make one align left and one align right with no background?

Whatever the text is, it just has to fit "inside" the other. Might take some tweaking to get it.

[Millennium]

Do you have a link, or some sample HTML code that would use this CSS?

[headbirth]

I tried a float: right and it worked for Safari, but Firefox and IE had it postioned to low .... out of the CSS box defined by boxNew. Are you suggesting that the class boxNew would float left and that the class span of postInfo would use a float right?

[Simon Mundy]

Originally posted by headbirth:
I tried a float: right and it worked for Safari, but Firefox and IE had it postioned to low .... out of the CSS box defined by boxNew. Are you suggesting that the class boxNew would float left and that the class span of postInfo would use a float right?

Nope - you've got the right idea with your existing code. Unfortunately, you have to position the postInfo BEFORE your unfloated text for it to work cross-browser. Silly, isn't it?

So... [collapsed code for UBBs sake!)

Code:
<a href="javascript:toggleID(300);" id="work01" class="boxNew">
<span class="postInfo">
Stagnito Communications: Art Direction, Design, Production
</span>
? Candy Industry Magazine</a>

I'd recommend making postInfo a fixed width (100px or 25% or whatever), a 'block' element and allowing a 10-15px left margin to avoid crashing type.

If you wanted the text appear in a certain order you could get around this oddity by creating a float:left and a float:right for the two boxes respectively, but this also seems a bit of overkill for something that seems such a simple task.

[headbirth]

Thanks Simon! That did the trick.

I've run into that strange ordering before when trying to get things to work in Firefox and IE.