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 CSS Layout Basics Page Layout with the Float Property Creating a Horizontal Navigation with Floats

Kevin Dunn
Kevin Dunn
6,623 Points
Posted by Kevin Dunn
Kevin Dunn
6,623 Points

Some questions about aligning the navigation list on the same line

So I was trying to follow the instructions of aligning the navigation list on the same line in the header. In the video, the float:left property was used in the .main-nav li{} to align the navigation list horizontally. I tried to use the display: inline-block instead of the float:left property and got the same results. Whats the difference? Both ways are acceptable?

Here below is my code

/* ================================= 
  Base Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.5em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
}

.name,
.main-nav li {
    text-align: center;
    background: #fff;
    margin-top: 6px;
    margin-bottom: 6px;
}

.name a,
.main-nav a {
    padding: 10px 15px;
    text-align: center;
    display: block;
}

    .main-nav a {
        font-size: .95em;
        color: #3acec2;
        text-transform: uppercase;
    }

    .main-nav a:hover {
        color: #093a58;
    }

/* ---- Layout Containers ---- */

.container {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

.main-footer {
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 789px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 85%;
        max-width: 1150px;
        margin: 0 auto;
    }

  .main-nav{
    float:right;
  }

  .main-nav li{
    margin-left: 12px;
    display: inline-block;
  }

  .name{
    float:left;
  }

    .feat-img {
        width: 300px;
    float:right;
    margin-left: 25px;
    margin-bottom: 25px;
    }

}

2 Answers

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

:point_right: There is rarely just one way to do something in CSS.

Floating removes an item from normal inline flow entirely, but inline-block allows it to remain in the flow but not require an entire line. For a given window width, the effect may be the same, but you might see some differences at different window sizes.

There could be performance concerns that might make one method preferable. But since layout is all about achieving a particular appearance, if it looks and functions the way you intended, it's acceptable.

Joseph Lander
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Lander
Full Stack JavaScript Techdegree Graduate 27,764 Points
Joseph Lander
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Lander
Full Stack JavaScript Techdegree Graduate 27,764 Points

Yes I was having the same concerns when completing the "float challenge". The fact that floats had just been taught, I went for two floats for the nav items (ul right and li left). I eventually got it after clearing up some issues with top alignment with the name but the teacher had done exactly as you had. One teacher I saw recently said "the right way is the way that works!". Those out the with mild OCD would disagree I'm sure but it did reassure me. Just make sure to test it out in as many ways as you can to check.