How can I create a split divider with text in the middle in Webflow without using Flexbox for optimal IE support?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To create a split divider with text in the middle in Webflow without using Flexbox for optimal IE support, you can follow these steps:

Add a Section element to your page:

Drag and drop a Section element from the Elements Panel onto your canvas.

Configure the Section element:

Set the height of the Section element to the desired height for your split divider.
Set the background color or image of the Section element to create the visual split.

Add a Container element to the Section:

Within the Section element, drag and drop a Container element.

Configure the Container element:

Select the Container element and set its width to 100%.
Set the display property of the Container element to Table.
Set the height of the Container element to 100% to ensure it fills the entire Section element.

Add a Div Block element to the Container:

Within the Container element, drag and drop a Div Block element.

Configure the Div Block element:

Select the Div Block element and set its display property to Table-cell.
Set the vertical-align property of the Div Block to Middle.

Add text to the Div Block:

Double click inside the Div Block element to enter text mode.
Type the desired text.

Style the text:

Select the text inside the Div Block element.
Use the typography settings in the Webflow Style Panel to customize the font, size, color, and other properties of the text.

Fine-tune the design:

Adjust the Section element, Container element, and Div Block element as needed to achieve the desired visual split and text placement.

Preview and test:
- Preview your site to see how the split divider with text looks.
- Test it in different browsers, including Internet Explorer, to ensure optimal support.

By following these steps, you can create a split divider with text in the middle in Webflow without using Flexbox, which will provide optimal support for Internet Explorer.

Additional Questions:

How can I create a split layout in Webflow?
What are some alternative methods to Flexbox for creating layouts in Webflow?
Can I customize the styling of the split divider and text further in Webflow?

Is it possible to create a triangle marker in Webflow without coding, specifically like the orange triangle "Special Offer" in the corner of the picture, and if so, how can I hide the extra parts of the box to show only one triangle part?

How can I style the text that is typed into a form field in Webflow?

Can you add a stroke to text in Webflow and why does it draw a stroke around the insides of letterforms when using the Cabin font?

Is anyone able to successfully implement the "scroll-margin" CSS property in Webflow?

In Webflow, why is the link in my nav bar staying blue even though I can't find where the styling is coming from?

How do I remove the pink/red border overlay on selected elements in Webflow?

How can I create a main navigation bar in Webflow where the items become bold on hover and focused states without moving the rest of the elements due to padding?

How can I make my text responsive to the viewport in Webflow, especially on mobile phones, when the vw unit doesn't work in Safari? Is the fittext Javascript plugin the best solution and how do I implement it in Webflow?

How can I fix the issue where the top of some of my Webflow pages gets the same color as the page, but on others it remains white?

How can I work around the issue of the flexbox arrangement not staying in columns when using 'space around', but still keeping the items centered when they wrap in a smaller view?