HTML models
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
Comments