A Shortcut to Styling Text in a Webflow Rich Text Field

Want to style a block of text inside a Webflow rich text field? Drop a plain <div> inside your styled div in an HTML Embed, and the box wraps everything between the two — no custom HTML required. That's the whole trick. Here's how I tripped over it.

One of our content folks asked me to make a Q&A section of a blog post pop — just a subtle background color so it stood out. Easy enough, I thought. Off I went into the CMS to wrestle with the styles tied to a div I'd dropped into an HTML Embed.

My first instinct was to wrap the Q&A in an opening div at the top and a closing div at the bottom. Didn't work. What I got was a single, paragraph-height sliver of a box. If you inspect the page, you can see exactly what I tried in the rich text field — the closing div is sitting below that line of text, doing nothing useful.

So, like any good front-end dev, I started hand-writing custom HTML into the post to force the look. Then I did the thing we all do: I cut the HTML I'd just written and pasted it back into the Webflow HTML Embed block. Except I fumbled it and ended up with two opening divs by accident. The result was a double box — but it also wrapped the exact content I wanted it to wrap.

I fixed the mistake, then sat there trying to reverse-engineer what I'd just seen by accident.

That's when it clicked. By nesting a div inside the styled div, you get the look you're after:

<div class="box"><div>

The box now stretches over everything between the opening tag and the close, instead of collapsing to one line. This would've saved me a chunk of time — even though I'd already written the custom HTML for that section the hard way. Just don't forget to close your open divs. (Ask me how I know.)

If you spend a lot of time fighting the rich text field's limits like this, that's usually a sign the build is doing more work than it should. It's the kind of thing we untangle on Webflow development projects. If you hit weirder CMS quirks, see our notes on rogue page elements from reused CMS content and our Webflow development best practices for keeping a build clean.

FAQ

Why does my div only wrap one line in a Webflow rich text field?

Because the rich text field is splitting your opening and closing div across separate blocks, so the styled div only contains the first line. Nesting a plain <div> inside the styled div in a single HTML Embed keeps the structure intact and lets the box wrap the whole section.

Do I need custom HTML to style content in a Webflow rich text field?

No. The nested-div trick inside an HTML Embed gives you the boxed look without hand-writing custom HTML for every section. It's faster and easier to repeat across posts.

What's the exact markup for the box trick?

<div class="box"><div> to open, and remember to close both divs at the end of the content. The outer div carries your style class; the inner div lets the box wrap everything in between.

What if the styling still breaks?

Check that both divs are actually closed and that nothing in the rich text field has re-flowed your embed into separate blocks. Unclosed or mismatched tags are the usual culprit — same as it ever was in plain HTML.