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 Ayush Bahuguna
Ayush Bahuguna
2,092 Points

How to place two lists, with its items inline, exactly on the opposite ends of the screen?

So, I have two lists on a blue background. I want them to be on the opposite ends. I tried "float" but, it pushes them out of the background.

HTML code is

<header class="all_nav">
          <div class="nav">
              <ul>
                <a href="index.html"><li>Home</li></a>
                <li>Contact</li>  
              </ul>
            </div>

            <div id="logo">
            </div>

            <div class="secnav">
                <ul>
                    <a href="Career.html"><li>Career</li></a>
                    <li>Achievements</li>
                    <a href="gallery.html"><li>Gallery</li></a>
                </ul>
            </div>
        </header>

And the CSS code is

 .all_nav {
        max-width: 100%;
        height: 3em;
        background-color: #6DC2FF;
        margin: 0%;
        margin-top: 0%;
    }

    .secnav {
        border-bottom: 0em;
    }
    .secnav {
        margin: 0%;
    }

    .secnav ul {
        padding-bottom: 1em;
        display: inline;
        float: right;
    }



    .nav {
        margin: 0%;
        width: 0em;
        height: 0em;
        background-color: none;
        border-bottom: 0em;
    }
    .nav ul {
        display: inline-flex;
        padding: .2em;
        margin-left: 3em;
        float: left;
    }

Help, please.

Pavle Lucic
Pavle Lucic
10,801 Points

could you provide code?

2 Answers

Justin Iezzi
Justin Iezzi
18,199 Points

Thanks for the code Ayush,

I believe what you're looking for is called a clearfix. Since you've floated the two elements inside of the nav container, the container has collapsed. This is an issue with floats that will happen sometimes. The fix is pretty simple.

Look here -

 .all_nav {
        max-width: 100%;
        background-color: #6DC2FF;
        margin: 0%;
        margin-top: 0%;
       overflow: auto;
    }

Notice how I removed the height property, and added the overflow property. The overflow: auto; property will make sure that the parent container won't collapse when elements are floated inside of it.

Hope this is what you were looking for. Feel free to ask questions if you have any.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

It didn't work. Although, the background container did adjust itself but, the lists remain on the left side and are placed vertically.

Justin Iezzi
Justin Iezzi
18,199 Points

Not entirely sure what you're looking for, Ayush. I think I'm seeing something different than what you are describing.

I made a CodePen, see here. Does this look like what you're looking for? Be sure to check in different browsers as well.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Yes I want exactly the same thing except that the list items of second list should appear in one line.

Justin Iezzi
Justin Iezzi
18,199 Points

Ah okay. Check the CodePen now. I just made a new rule for .secnav ul li and set the display property to inline. This allows them to appear side by side.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Okay. I got it. One additional thing that I had to do was float "secnav" to right too. Actually this css is for the responsive design. I started with a mobile version. Which had two navigations at different positions.

But, now a scroll bar is appearing along the nav background. Please help me with this.

Justin Iezzi
Justin Iezzi
18,199 Points

Try switching the overflow: auto; to overflow: hidden;. If that doesn't work the way you want it to, you can simply get rid of the overflow property and set a height to your nav.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Yay. It worked. Thank You so much. :)

Justin Iezzi
Justin Iezzi
18,199 Points

Happy to help!

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Hi sir.

I have a problem with my website. The navigation that we fixed yesterday is not working on my gallery page.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Gallery</title>
        <link rel="stylesheet" href="c/home.css" />
        <link rel="stylesheet" media="(min-width: 640px)" href="c/responsive.css" />

    </head>
    <body>
        <header>
          <div class="nav">
              <ul>
                <a href="index.html"><li>Home</li></a>
                <li>Contact</li>  
              </ul>
            </div>

            <div id="logo">
            </div>
            <div class="secnav">
                <ul>
                    <a href="Career.html"><li>Career</li></a>
                    <li>Achievements</li>
                    <a href="gallery.html"><li>Gallery</li></a>
                </ul>
            </div>
        </header>

        <section id="content">
            <br><div id="gallery_heading"><h1 id="heading">This is my gallery</h1></div>
          <p>Below are the finest images that we have curated for your visual ecstasy. The images are properly aligned so as to impart symmetry throughout the page. Most of the website designers don't pay much heed to the images and work in a hassle to complete the project. But, we do take the saying, "A picture worth thousand images", seriously. That's why we look out for images that suit your personality hence captivating the visitors attention. <br>Make sure to click on them. The images are responsive as well. Special care has been taken in order to bring out the beauty that the images contain.</p>
            <ul class="images">
                <li class="image">
                    <img src="images/numbers-01.jpg" style="max-width: 100%; height: auto">
                </li>
                <li class="image">
                    <img src="images/numbers-02.jpg" style="max-width: 100%; height: auto">
                </li>
                <li class="image">
                    <img src="images/numbers-06.jpg" style="max-width: 100%; height: auto">
                </li>
                <li class="image">
                    <img src="images/numbers-09.jpg" style="max-width: 100%; height: auto">
                </li>
            </ul>
        </section>        
        <div class="footer">
            <p id="left">&copy; Get Ahead P.O 2015-2016</p>
            <br>
            <p id="right"><br>179/34 Dream Lane<br>Dream City<br>112908<br>Dream Country</p>
       </div>
    </body>
</html>

And css

/* Sections */
#content {
    max-width: 100%;
    margin: 3%;
    word-wrap: normal;
    font-size: 1.3em;
    text-align: justify;
    padding: 0% .5% 0% .5%;
    line-height: 1.5em;
}

.images {
    list-style: none;
  align-content:center;
    display: block;
    max-width: 100%;
    margin-top: 5%;
    margin-left: 3%;
    margin-bottom: 5%;
  margin-right: 10%;
    align-items: center;
}

.image {
    margin-bottom: 1em;
}

#gallery_heading {
  max-width: 100%;
  background-color:#f5f5f5;
  height: 5em;
}

#heading {
  font-size: 2em;
  max-height: 5em;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0%;
  padding-top:2em;
  padding-bottom: 4em;
}

It is working with the mobile version but, when I shift to Desktop. The blue background on the navigation gets shrinked to the corner, although the list items remain in the perfect position.

Justin Iezzi
Justin Iezzi
18,199 Points

Hard to say exactly what's causing it Ayush. It sounds like the container for your navigation is collapsing again though, and our clearfix isn't helping it. You may just want to use a height value so that it stays no matter what. Otherwise you could try a few more clearfixes, you can find a bunch of good methods on google.

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hey Ayush,

Floats should work. I made an example CodePen for you to check out, see here.

If you're still having problems with it, try using the overflow: auto; property on your container element, it'll make sure the floated elements inside will stay within its block area.

Worst case, you can post your code here and I can take a look for you. If you're testing in a Treehouse workspace, take a snapshot and paste it back here. If not, you can post the code here using the appropriate code formatting as per the "Markdown Cheatsheet" link seen on this page.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points

HTML

HTML code is
```html

<header class="all_nav">
          <div class="nav">
              <ul>
                <a href="index.html"><li>Home</li></a>
                <li>Contact</li>  
              </ul>
            </div>

            <div id="logo">
            </div>

            <div class="secnav">
                <ul>
                    <a href="Career.html"><li>Career</li></a>
                    <li>Achievements</li>
                    <a href="gallery.html"><li>Gallery</li></a>
                </ul>
            </div>
        </header>

And the CSS code is

.all_nav { max-width: 100%; height: 3em; background-color: #6DC2FF; margin: 0%; margin-top: 0%; }

.secnav {
    border-bottom: 0em;
}
.secnav {
    margin: 0%;
}

.secnav ul {
    padding-bottom: 1em;
    display: inline;
    float: right;
}



.nav {
    margin: 0%;
    width: 0em;
    height: 0em;
    background-color: none;
    border-bottom: 0em;
}
.nav ul {
    display: inline-flex;
    padding: .2em;
    margin-left: 3em;
    float: left;
}