DIVs aren't aligned and disappear upon publishing

How to align DIVs

How to align DIVs

How to align DIVs

How to align DIVs

By Vincent Bidaux, published on
October 27, 2016
This post has been featured on the
Webflow blog
DIVs have a dashed border, appear too high, vanish once the site's published.
Fix
Put content in the DIV and give it some dimensions.

On occasions, users notice their elements don't look the same even if they share the same class. Wether it's within the designer or once the site has been published, they don't get the same baseline, or size, or totally disappear. 

What's going on?

The divs aren't enough styled, and they don't all have content. 

When you build a grid of content, make sure you have placed content in all of your cells before testing, or you can run into visual hickups. The reason is that by default, a DIV is not shown by HTML if it doesn't have dimensions. Webflow applies default dimensions to DIVs for design purposes, but as sson as you publish the site, the DIVs disappear.

When a DIV has no declared dimensions, the content inside sets its dimensions. By setting your dimensions manually, you'll get what you expect.

‍When a DIV has no declared dimensions, the content inside sets its dimensions. By setting your dimensions manually, you'll get what you expect.

If you want empty DIVs to properly align in Webflow, you'll need to give them a float property.

Check the Stucture demo
This is the
Fixes
category
Posts in other categories