Skip to content

Instantly share code, notes, and snippets.

@trinonsense

trinonsense/cp-horizontal-flush-panel.md

Last active January 2, 2016 15:29
Show Gist options
  • Save trinonsense/8323941 to your computer and use it in GitHub Desktop.
Save trinonsense/8323941 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Pattern: Horizontal Flush Panel
Raw
cp-horizontal-flush-panel.md

CSS Pattern: Horizontal Flush Panel

A panel with horizontically aligned two child elements completely flushed to the right or left

Horizontal Flush

A child element stay flushed to its side even if the other child element doesn't exist

Horizontal Flush left

Horizontal Flush right

If a child element is a long text element with ellipsis and no wrapping are enabled, its width must auto-sized to the other child element's min-width.

Horizontal Flush ellipsis

Techniques

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment