NexyVeicearry
New Member
How does one make a two-column stacked list, one left-aligned, one right-aligned out of one \[code\]<UL>\[/code\] element? So far, I can only get elements to float next to each other when I need them to stack like block level elements.Desired layout (from PSD):
What I have so far:
HTML:\[code\]<nav> <ul class="top_nav"> <li class="group_a"><a href="http://stackoverflow.com/questions/15469514/#">Hitched</a></li> <li class="group_a"><a href="http://stackoverflow.com/questions/15469514/#">Hatched</a></li> <li class="group_a"><a href="http://stackoverflow.com/questions/15469514/#">Hello</a></li> <li class="group_b"><a href="http://stackoverflow.com/questions/15469514/#">Our Story</a></li> <li class="group_b"><a href="http://stackoverflow.com/questions/15469514/#">Details</a></li> <li class="group_b"><a href="http://stackoverflow.com/questions/15469514/#">Readymade</a></li> </ul></nav>\[/code\]
CSS (SCSS):\[code\]header { padding-top: $row / 4; padding-left: $cols*2 - $gut; padding-right: $cols*2 - $gut; padding-bottom: $row / 3; .top_nav { .group_a { display: inline-block; float: left; } .group_b { display: inline-block; float: right; } }}\[/code\]
What I have so far:
CSS (SCSS):\[code\]header { padding-top: $row / 4; padding-left: $cols*2 - $gut; padding-right: $cols*2 - $gut; padding-bottom: $row / 3; .top_nav { .group_a { display: inline-block; float: left; } .group_b { display: inline-block; float: right; } }}\[/code\]