I am quite new to CSS and want to position a box to the RIGHT of my existing box. (proposed box marked by red arrow).
How do I do that in CSS effectively that will work both in IE and firefox?



Here's the code I am using for the first box:

<div id="container" style="width: 177px; height: 160px;">
    <div style="background: transparent url(sbx-top.png) repeat scroll 0% 0%; float: left; height: 31px; width: 177px;"></div>
    <div style="background: transparent url(sbx-left.png) repeat scroll 0% 0%; float: left; height: 100px; width: 12px;"></div>
    <div style="background: #e8e8e8 none repeat scroll 0% 0%; float: left; height: 100px; width: 153px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
    <div style="background: transparent url(sbx-right.png) repeat scroll 0% 0%; float: left; height: 100px; width: 12px;"></div>
    <div style="background: transparent url(sbx-bottom.png) repeat scroll 0% 0%; float: left; height: 13px; width: 177px;"></div>
</div>

Also, when I increase text size in IE or firefox, I don't want the text to grow outside the container. Any ideas?

float:right ?

The answer is to float the boxes, they can both be set to float: left , or right.

sometimes floating right won`t work..it would be better if you float left both the first and the second one and it will show up as in the image

sometimes floating right won`t work

Why not? I can't think of a single reason why it wouldn't.