How can I ensure that text is inside rounded div?

Question

I want to have my round div to keep the text inside it. like you see on the image

<

Answer 1

There is a CSS feature currently being standardised called "CSS Shapes".

(NB: "CSS Shapes" is the name of the CSS feature spec; not to be confused with the act of simply creating a non-rectangular shape in CSS, which you've already done)

The CSS Shapes feature will do exactly what you're asking for -- ie allow you to specify the shape of an element, with regards to how the text inside it (and/or outside it) should wrap.

You can learn more about it in various articles around the web. Here are a few you may want to read:

• The CSS Shapes Module will Revolutionize Web Design
• Using CSS Shapes to Enhance Visual Storytelling
• Reshaping the web with CSS shapes & exclusions

You can also read the W3C spec document for it here: http://dev.w3.org/csswg/css-shapes/

However (and this is is a big "however"), this feature is not widely available in browsers yet. It is still in the process of going through the specification process, and has very limited browser support.

In the meanwhile, what you're asking for is actually very difficult to achieve. You may be forced to resort to sticking a bunch of spacer elements around the area you want to force the text to flow around them. Not ideal, but until this new spec starts being widely supported in browsers, it's probably about as good as it's going to get for you.