{"id":92,"date":"2011-02-27T19:38:37","date_gmt":"2011-02-27T19:38:37","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=92"},"modified":"2011-02-27T19:38:58","modified_gmt":"2011-02-27T19:38:58","slug":"two-column-list-html-cs","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/two-column-list-html-cs\/","title":{"rendered":"Two column list – the elegant way"},"content":{"rendered":"

If you have two individual lists, instead of stacking them, you'll be able reduce scrolling by placing them side-by-side. The example below demonstrates one elegant way to achieve this.<\/p>\n

The HTML<\/h3>\n
<div<\/span> class<\/span>="list-columns"<\/span>>\r\n  <ul<\/span>>\r\n    <li<\/span>>Item 1<\/li<\/span>>\r\n    <li<\/span>>Item 2<\/li<\/span>>\r\n  <\/ul><\/span>\r\n  <ul<\/span>>\r\n    <li<\/span>>Item 3<\/li<\/span>>\r\n    <li<\/span>>Item 4<\/li<\/span>>\r\n  <\/ul<\/span>>\r\n<\/div<\/span>>\r\n<\/code><\/pre>\n
The CSS<\/h3>\n
.list-columns ul { float: right; }
\n\t.list-columns ul:first-child { float: left; }
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
If you have two individual lists, instead of stacking them, you'll be able reduce scrolling by placing them side-by-side. The example below demonstrates one elegant…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12,14],"tags":[39,38],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":2,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/92\/revisions\/94"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}