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

HTML

Posted by Zachary Pearson
Zachary Pearson
9,578 Points

Formatting unordered lists across browsers

I'm having some trouble formatting an unordered list to work properly across all browsers. The below looks fine in Chrome, but strange in IE and Firefox.

This is pretty simple, I know, but I'm new to this and can't seem to get it quite right.

Thanks for any help!

<div id="leftcolumn">
<ul>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
</ul>
</div>

<div id="rightcolumn">
<ul>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
<br>
<li>Lorem Ipsum</li>
</ul>
</div>

Here's the CSS:

#leftcolumn {
    float: left;
    width: 50%;
    }

#rightcolumn {
    float: right;
    width: 50%;
    }

9 Answers

Zachary Pearson
Zachary Pearson
9,578 Points
Zachary Pearson
Zachary Pearson
9,578 Points

Sorry - for some reason can't get the HTML portion to past in (as you can see it formats it rather than just posting the code). It's just two unordered lists with <br>'s between each item - the first four are within a div with the id "leftcolumn", while the second 4 are within a div with id "rightcolumn".

Thanks!

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Hey Zachary, what is the strange behavior you get in IE and FF?

Zachary Pearson
Zachary Pearson
9,578 Points
Zachary Pearson
Zachary Pearson
9,578 Points

Hi Mireille! I'm working on this question on stack overflow too, and here's where I've got to - the IE version now looks like this:

I would like to have it be uniform, and am not sure why the first two items of each list are indented. Also, I can't seem to get a space between the level 2 header above and the two lists below (there's one in chrome; maybe I can do it with padding?)

Thanks,

Zach

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Man, that IS weird behavior! I'm trying to figure out what could be causing that. For now, would you mind trying to change the "float" in the right column to "left"? When you want your objects (in this case your left column and right column divs) to be one beside the other you don't need to set the second object to float right, if you set both to float left, you'll have the first one floating at the furthest left and then the second floating left beside it, (if you had more divs you would have your third and all subsequent objects floating next to each other even if all of them are set to float left).

I'm not sure this will solve your problem but it will sure prevent weird behavior in the future as you build up on this code. Now to get space between your "h2" you could add "margin-bottom" to it. Let me know if you see any changes.

Zachary Pearson
Zachary Pearson
9,578 Points
Zachary Pearson
Zachary Pearson
9,578 Points

Thanks for the suggestion! No luck, unfortunately - the first li is still off-center. Any other ideas?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Zachary Pearson -

I haven't been able to re-produce your issue (you didn't tell us what version of IE you are using).

This looks fine in the latest version of Chrome, Firefox & IE 10.

http://codepen.io/jamesbarnett/pen/JnBAt

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Hey, you don't need br tags after each li tag, if you want extra space between the li tags you can always add it with css. Either bottom margin or padding will work way better and give you a clean code.

Zachary Pearson
Zachary Pearson
9,578 Points
Zachary Pearson
Zachary Pearson
9,578 Points

Hi all,

Thanks for the help from both of you! I was actually able to figure it out - I had a display:inline property on all my ULs earlier in my CSS file, and when I removed it the issue went away. Should have included my UL CSS properties in my original post - sorry, still a bit new at this!

Thanks again,

Zach

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

You should be proud of yourself, you figured it out on your own! :)