Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> .multicol { background-color: lightyellow; padding: 10px; /* Safari and Chrome */ -webkit-column-count: 3; -webkit-column-rule: 2px dotted coral; /* Firefox */ -moz-column-count: 3; -moz-column-rule: 2px dotted coral; /* CSS3 */ column-count: 3; column-rule: 2px dotted coral; } .multicol ul { break-inside: avoid; } </style> <div class="multicol"> <h3>Fruit</h3> <p>Here is a list of delicious fruit:</p> <ul> <li>Mangoes</li> <li>Papaya</li> <li>Strawberries</li> <li>Rasberries</li> <li>Lychees</li> <li>Durian Fruit</li> </ul> <p>If your browser supports this property, the above list should appear in one column. Otherwise it will probably break over to the next column.</p> </div>