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

Posted by znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

<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
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.

znzlcrstkk
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points
znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

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
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

znzlcrstkk
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points
znzlcrstkk
.a{fill-rule:evenodd;}techdegree seal-36
znzlcrstkk
Front End Web Development Techdegree Graduate 28,511 Points

Thank you Brandon, your answer is very good