Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
/
Simple Layout Techniques
Updated Apr 09, 2018

Simple Layout Techniques

Apr 09, 2018

Inline Layout

This layout uses inline-block elements to create a horizontal layout.

Get the code on Codepen.

Float Layout

Get the code on Codepen.

Inline & Float Layout Combination

Get the code on Codepen.



For you
Web Development
  • Web Development
    Link Icon
    Web Development
Results will update as you type.
  • A basic Barchart
  • Absolute Positioning
  • Code Editors
  • CSS
  • CSS Animations
  • CSV Transformation with node.js
  • d3.js
  • Desktop Source Compilers
  • Homebrew
  • Hosting Services
  • HTML CSS Javascript Resources
  • Interactive Visualization
  • jQuery
  • Mobile Optimization
  • node.js
  • Page-High Resizable Containers
  • Scrollable Visualization
  • Simple Layout Techniques
  • SVG
  • SVG Visualization
  • Terminal
  • UI Prototyping Tools
  • Version Control with GitHub
    Two hearts overlapped with each other
    Welcome back
    Catch up on the top discussions and highlights from your team.
    {"serverDuration": 34, "requestCorrelationId": "12f30265eb1d4a73984437dadb1c2b66"}