Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

<ul> and float, how to float the <ul>?

I dont understand, when I try to float unordered list to right, it all collapses, why this is happens?

3 Answers

brandon downs
brandon downs
11,577 Points

I haven't seen any of your code, but are you floating the unordered list element <ul>? or the individual list emelements <li>

something like this should work:

<ul>
    <li>apple</li>
    <li>banana</li>
    <li>pear</li>
    <li>kiwi</li>
    <li>watermelon</li>
</ul>
ul {
    float: right;
    background: red;
}

i added the red background color to the ul so you could see that it has not collapsed.

thank you Brandon for your answer. But if I want to align <ul> to center it's better tu use position relative or absolute? Or there is other way how I can make it?

brandon downs
brandon downs
11,577 Points

i have just begun to learn all of this, so i could be wrong. if i am maybe someone else can chime in if they are reading this...

but i think that position relative and absolute really only work together. you need to set the parent element of the element that you want to center (in this case, the parent element of the ul) to position relative. and then you can set the ul element to position absolute. this way using the top|right|left|bottom properties move the ul according to the dimensions of the parent element.

like this

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <ul>
        <li>apples</li>
        <li>oranges</li>
        <li>bananas</li>
        <li>pears</li>
        <li>lint</li>
    </ul>
  </div>
</body>
</html>
div {
  position: relative;
}

ul {
  position: absolute;
  right: 50%;
}

i set the right property to a value of 50%. this however doesnt exactly center it like you might think. what it does is move the right side of the ul box to be exactly 50% from the right side of the parent element at all times. so to get it exactly centered, would take a little bit of math to figure out the exact value to set.

i think an easier way is to use position: flex. it is similar to position absolute and relative, but removes any need for all of the math to exactly center something

similarly, you want to set the parent element to position: flex; and on that same parent element you can use the justify-content property and set it to space-around this takes the available space inside the parent element and distributes it equally on the left and right sides of the child elements inside of it.

using the same html as the last example, here is what the css should look like

div {
  display:flex;
  justify-content:space-around;
}

hope this answers your question

Thank you Brandon, your answer is very good