Two-column layout allows effective use browser space. Layout doesn’t require hard work and it can used with combining column in pixels or percentage.
There are several approach for formation such layout, but the quickest and easiest is combine margin and float.
For left side bar with static width
| For left layer with width 20% | |
|---|---|
Left column |
Right column |
| float: left width: 20% | margin-left: 21% |
| For left layer with width 200px | |
| float: left width: 200px | margin-left: 210px |
For right side bar:
| For right layer with width 20% | |
|---|---|
| Left column | Right column |
| margin-right: 21% | float: right, width: 20% |
| For right layer with width 200px | |
| float: right width: 200px | margin-left: 210px |
See the Pen Fluid two-column layout with float by qetr1ck-op (@qetr1ck-op) on CodePen.
# With display: flexSee the Pen Two-column layout with Flexbox by qetr1ck-op (@qetr1ck-op) on CodePen.
Make my day: * fluid 2 column layout * awesome checkboxes