HTML models

1 minute read

Layout

Zero-offset panel

Make a panel inside the <body> container without offsets or margins.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Auto-expanding parent

Let a parent element expand as its children grows in number or size. The parent elements may grow in different directions and have different alignments, so there different implementation for different situations.

To expand vertically: The key is to use min-height: <foo> and and height: auto for the parent.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

To expand horizontally: You can use display: inline-block for this purpose, but all the parent blocks will be aligned horizontally. To make them on separate lines use float: left; clear: left; instead.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Fixed scrollable panel

Make a panel which is fixed in position and scrollable when its content overflows.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Slide-in overlay

Make a panel overlaying another panel slide in/out by hovering on/off the other panel.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Slide-in overlay to carry

Make a panel overlaying another panel and carrying a child slide in/out by hovering on/off the other panel.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Slide-out overlay to unveil

Make a panel overlaying another panel slide out by hovering on the panel and reveal what’s beneath.

See the Pen Zero-offset pane by Ivan Huang (@ivanhjc) on CodePen.

See also: Demo

Tags:

Categories:

Updated:

Comments