obout Interface - OboutDropDownList - Multiple Rows and Columns

Two columns: Select a country ...Select a country ... ArgentinaArgentina AustriaAustria BelgiumBelgium BrazilBrazil CanadaCanada DenmarkDenmark FinlandFinland FranceFrance GermanyGermany IrelandIreland ItalyItaly MexicoMexico NorwayNorway PolandPoland PortugalPortugal RussiaRussia SpainSpain SwedenSweden SwitzerlandSwitzerland UKUK USAUSA VenezuelaVenezuela

Three columns: Select a country ...Select a country ... ArgentinaArgentina AustriaAustria BelgiumBelgium BrazilBrazil CanadaCanada DenmarkDenmark FinlandFinland FranceFrance GermanyGermany IrelandIreland ItalyItaly MexicoMexico NorwayNorway PolandPoland PortugalPortugal RussiaRussia SpainSpain SwedenSweden SwitzerlandSwitzerland UKUK USAUSA VenezuelaVenezuela

Four columns: Select a country ...Select a country ... ArgentinaArgentina AustriaAustria BelgiumBelgium BrazilBrazil CanadaCanada DenmarkDenmark FinlandFinland FranceFrance GermanyGermany IrelandIreland ItalyItaly MexicoMexico NorwayNorway PolandPoland PortugalPortugal RussiaRussia SpainSpain SwedenSweden SwitzerlandSwitzerland UKUK USAUSA VenezuelaVenezuela

The items of the OboutDropDownList can be arranged on multiple columns.
This can easily be achieved using a small CSS trick:

.ob_iDdlICBC li { float: left; width: 125px; }

The OboutDropDownList will arrange its items on as many columns as possible,
taking the width of the drop down menu and the width of the individual items into account.


« Back to examples