Live Editing

Move Element

Drag any element to a new position to test layout ideas directly in the browser, without touching a stylesheet.

When you'd use it

How to use Move Element

  1. Start Move Element from the popup.
  2. Hover to highlight a draggable element.
  3. Drag it to a new position — surrounding content reflows live.
  4. Reload to reset the page to its original layout.

Move Element FAQ

Does this generate the CSS for the new position?

No — it is a fast way to evaluate an idea visually. Once you know the arrangement you want, implement it properly in your stylesheet or template.

Why did the page jump when I dragged something?

Removing an element from the normal document flow reflows everything after it. That reflow is useful information: it shows how much the layout depends on that element's position.

Can I move an element into a different container?

Dragging repositions the element visually so you can judge the idea. Reparenting it properly is a template change, which is the step to take once you know the arrangement works.

Get Move Element and 28 more tools

7-day free trial, no credit card. Then $5.99 once — no subscription.

Install from the Chrome Web Store