Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David Pinner
David Pinner
7,039 Points
Posted by David Pinner
David Pinner
7,039 Points

splitting <ul> lists up to display half one side of my page half the other side

I am trying to create my first trial web page and would like the to split the tax bar items to show 3 <a href=""> each side, I can get them to be all in the same line and can get them to split so it shows, them either side but one set is at the top and the other side a the bottom like they are in different boxes.

Html code: <div id="list1"> <ul> <li><a href="#">Aberdeen </a></li> <li><a href="#">Inverness </a></li> <li><a href="#">Dundee </a></li> <div id="list2"> <li><a href="#">Edinburgh </a></li> <li><a href="#">Glasgow </a></li> <li><a href="#">Stirling </a></li> </ul> </div>

css code:

list1 {

text-align: left; }

list2 {

text-align: right;

a { background-color: thistle; text-decoration: none; padding: 5px; font-style: oblique; box-sizing: border-box;

}

any ideas????

2 Answers

Tim Strand
Tim Strand
22,458 Points
Tim Strand
Tim Strand
22,458 Points

Here is a codepen utilizing flexbox that should be doing about what you are looking for

https://codepen.io/tstrand66/pen/WgvvKw?editors=1100

Raluca Dumitru
Raluca Dumitru
14,937 Points
Raluca Dumitru
Raluca Dumitru
14,937 Points

Hi David. I would split the list in 2 also, but inside the <ul>. Something like this:

<ul class='my_list'>
  <div id='list1'>
    <li></li>
    <li></li>
    <li></li>
  <div id='list2'>
    <li></li>
    <li></li>
    <li></li>
</ul>

And the in css you can use something called a flex box for the ul, like this:

.my_list {
  display: flex;
  flex-direction: row;
}

Here you have the link for the flex box documentation. I hope this helps .

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

David Pinner
David Pinner
7,039 Points
David Pinner
David Pinner
7,039 Points

Thanks for that, its solved my problem with out having to add loads of left and right margin to each list to spread them.