text wraps down in rounded corner box - css

Question

I need to do dinamic rounded box, (dinamic height and dinamic width)
I try using the code offer in the link bellow:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
but I need it also with images for the middle left and right (I can't use simply background and border as offers in the up code,
I try modified the code, and the box looks great,
but when I enter text in it, the text wrap down.
any idea?
Html code
<div class="RoundCrnr">
<div class="TopLeft"></div>
<div class="TopRight"></div>
<div class="inside">
<div class="MiddleLeft">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
<div class="MiddleRight"></div>
</div>
<div class="BottomLeft"></div>
<div class="BottomRight"></div>
</div>
the Css Code
.RoundCrnr {
width:590px;
float:right;
}
.TopLeft {
background-image: url("/Content/Images/Top_left.png");
height: 34px;
font-size: 2px;
margin-right: 34px;
}
.TopRight {
float: right;
margin-top: -34px;
background-image: url("/Content/Images/box_top_right.png");
height:34px;
width: 34px;
font-size: 2px;
}
.gap-saver {
height: 1px;
margin: 0 0 -1px 0;
padding: 0;
font-size: 1px; /* to correct IE */
}
.MiddleLeft {
background-image: url("/Content/Images/Middle_left.png");
height: 7px;
margin-right: 20px;
}
.MiddleRight {
float: right;
margin-top: -7px;
background-image: url("/Content/Images/box_right.png");
height:7px;
width: 20px;
}
.BottomLeft {
background-image: url("/Content/Images/Bottom_left.png");
height: 33px;
font-size: 2px;
margin-right: 33px;
}
.BottomRight {
background-image: url("/Content/Images/box_bottom_right.png");
background-position: 100% 0;
background-repeat: no-repeat;
height: 33px;
font-size: 2px;
margin-top: -33px;
}
.inside {
}
thanks a lot!

Answer 1

I suggest using pure CSS. CSS3 to be precise. And if you are worried about browser compatibility, this is truly excellent:
http://css3pie.com/
The documentation should help you get started with some css3 code to make a box with rounded corners, and how to use their script to be cross-compatible:
http://css3pie.com/documentation/getting-started/
I've used it several times so far, and now not afraid to use CSS3!
BTW in regards to why your text is wrapping down, it is because you have several div tags, which are block elements (display:block). This makes them sit on top of one another (they kinda behave like paragraphs). I don't know the reason why you have several divs, but you could either change the div's display value like this:
.MiddleLeft div {
display: inline;
}
Or change them to span tags, which are inline elements. You can find out more by googling for difference between span & div tags.
Hope this all helps!
Ali.