Manifest
Manifest, made with Webflow by Vincent Bidaux.
ArticlesDemosCMS TimelineContact
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
August 11, 2020
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.

Structure demo —

PerspectiveCascadeRotateFlatten
Check the Stucture demo
Check the staged demo
Check the demo site
This is the
Fixes
category
Most frequent solutions — Part 2
★
Floating Navbar item
★
Top 10 most frequent solutions
★
How to align DIVs
★
Multi lines message in forms
★
Posts in other categories
2020 Webflow Features Wrap-up!
★
The Perfect Button
★
CSS Background animation
★
Design with HTML5 Semantic Elements
★
Affect any element with a combo class
★
Designing with multilayered fonts
★
Master absolute positionning
★
Webflow secrets
★
Flexbox and the Grid
★
Follow me on Twitter
Webflow Designer profileMy Webflow Experts profileMy Behance portfolio

Read also

FIX
★
Most frequent solutions — Part 2
★
Floating Navbar item
★
Top 10 most frequent solutions
★
How to align DIVs
★
Multi lines message in forms
KNOW
★
Master absolute positionning
★
Webflow secrets
★
Flexbox and the Grid
MAKE
★
The Perfect Button
★
CSS Background animation
★
Affect any element with a combo class
★
Designing with multilayered fonts
Follow me on TwitterWebflow Designer Profile