Putting "<" to leftward and ">" to rightward

There are sosthers which is white background in the left side at http://dot.kr/x-test/layOut/16.
#titleLeft has the text sosthers.
In style.css the code of #titleLeft related is like the following.


#titleWrap {
margin:0 1px;
border:1px solid #555;
text-align:center;
padding:4px 4px 0 4px;
overflow:hidden;
}

#titleLeft, #titleRight {
 position:relative;
 width:180px;
 border:2px solid #555;
 background-color:#ffffff;
 padding:20px 2px;
 }

#titleLeft {
 margin-left: -190px;
 float:left
}

The text “sosthers” is between the link “<” and “>”.

I like to push the link “<” to leftward till just 1px apart from the left border line of #titleLeft.
and
I like to push the link “>” to rightward till just 1px apart from the right border line of #titleLeft.

I currently put some No Break Spaces (& n b s p; ) between the link “<” and the text “sosthers”.
This causes a problem by dropping the right-most link “>” in some low resolution browser.

How can I put the link “<” to left-end and the link “>” to right-end inside #titleLeft without No Break Spaces?

You can just float them :). Look at the added class “left” and “right” I added to each anchor.

<div id="titleLeft"><a href="/x-test/layOut/16/?left=190" class="b1_555 bWhite p1 f12 left"><</a> 
<a href="/x-test/layOut/16/?left=199" class="b1_555 bWhite p1 f12 left"><</a> 
sosthers
<a href="/x-test/layOut/16/?left=201" class="b1_555 bWhite p1 f12 right">></a> 
<a href="/x-test/layOut/16/?left=210" class="b1_555 bWhite p1 f12 right">></a> 
</div>

Then take a look at this CSS. Pretty basic.

.left{float:left;}
.right{float:right;}

And due to the text-align:center on “[COLOR=#000000][FONT=Consolas]#titleWrap”, you’re sosthers will remain in the center :).

Edit-I’d use < for < and > for > . Your HTML looks slightly confusing with the < and > hard coded in.[/FONT][/COLOR]