Containing a text in an oval shaped area
css, html
Solution
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float `<div>`'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated `<div>`'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
Problem
I have a html page which looks like the following: I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a `<img>` tag for it if it would help. One lame way is to use `<p>` tags with padding, but that is not an efficient way, so kindly suggest some good methods. EDIT: `HTML:` ``` <div id="leftStage" class="rounded-corners"> <div id="questionDisp" align="center"> </div> </div> ``` `CSS:` ``` #leftStage { position: relative; width: 34%; height:86%; float: left; } #questionDisp { display:none; } ``` `JS:` (When the appropriate function is called: ) ``` $("#questionDisp").fadeIn(1000); $("#questionDisp").html(quesArr.q1); //data read from xml ``` EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed