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 Andrew Stelmach
Andrew Stelmach
12,583 Points

My navbar only positions correctly after narrowing, then widening my viewport.

Use my code and open the html file while you have your browser already open and the width of your viewport (on a largish desktop/laptop screen).

You should see the navbar missing. Using the Inspector, you'll see that it's there, but RIGHT at the top of the page so you can't see it.

Now, narrow your browser window and widen it again. The navbar should now be sat nicely where it should be.

It's like the media queries have to be used before it sits in the right place.

This is beyond me, I have no idea. Do you know why this is happening? Obviously, it would be bad if this was a live webpage and the navbar was missing when people opened it in a large browser!

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Three Kings English Language Academy | English Language Teaching in Pamplona, Spain
        </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>

<body>
    <div class="main-wrapper">
        <div class="main-header">
            <div class="main-logo">
                <img src="images/3-crowns.jpg" alt="3-crowns">
                <h1>3 Kings</h1>
                <h2>Academia de Ingles</h2>
            </div>
            <div class="main-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Journal</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="main-banner">
            <img src="images/flag.jpg" alt="photo of happy students">
        </div>
        <div class="content-row group">
            <div class="primary-content col">
                <div id="learn-english">
                    <img src="images/flag.jpg" alt="photo of happy students">
                    <h3>Learn to speak English in the beautiful heart of Pamplona: the Plaza Del Castillo</h3>
                    <p>We concentrate on improving your ability to speak and converse in English confidently, and we will also improve your writing and listening skills, too.</p>
                </div>
                <div id="pass-your-exams">
                    <h3>Pass Your Exams with Ease</h3>
                    <div id="exams-image-wrapper"><img src="images/students-passing-exam.jpg" alt="photo of students passing their exams"></div>
                    <p>We are experts in preparing you to pass your English exams, if you so desire (both Official School and Cambridge). If you wish to just improve your English for your own personal or professional purposes, no problem! Let us know when you sign-up - your teacher will tailor the classes accordingly.</p>
                </div>
                <div id="natives-only">
                    <h3>Native Speaking Teachers Only</h3>
                    <p>We only employ experienced native speaking teachers. Take full advantage of their deep understanding of the language. Ask them anything!</p>
                </div>
                <div id="adults-only">
                    <h3>Adults Only</h3>
                    <p>We believe that by keeping our academy adults-only, our students ultimately learn more. Everything about the academy is tailored towards adult learning.</p>
                </div>
            </div>
            <div class="secondary-content col">
                <div id="company-classes">
                    <h3>Company Classes</h3>
                    <p>We already work with several companies in Pamplona. Take advantage of government funding and have our experienced teachers come to your workplace. We will make sure your employees improve their English in enjoyable and focussed classes.</p>
                </div>
                <div id="skype-classes">
                    <h3>Skype Classes</h3>
                    <p>Can't make it to our academy? No problem, get in touch and let us know what you want to achieve during your one-to-one classes, with the very same teachers that work at 3Kings.</p>
                </div>
            </div>
        </div>
        <div class="extra-content"></div>
        <div class="back-to-top"><a href="#">Back to top</a></div>
        <div class="main-footer">
            <ul>
                <li><a href="#">Phone</a></li>
                <li><a href="#">Email</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </div>
    </div>  
</body>
</html>
Andrew Stelmach
Andrew Stelmach
12,583 Points 
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  color: black;
  text-decoration: none;
}
Andrew Stelmach
Andrew Stelmach
12,583 Points

main.css:

/*GLOBAL SETTINGS*/

h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}


/*GLOBAL IMAGE SETTINGS*/

img {
  max-width: 100%;
  padding: 0;
  margin: 0;
}



/*************************************************************
    MAIN WRAPPER
*************************************************************/

.main-wrapper {
  max-width: 900px;
  margin: auto;
}



/*************************************************************
    HEADER
*************************************************************/

.main-header {
  border-bottom:3.2px solid #836c4c;
}



/*************************************************************
    LOGO
*************************************************************/

.main-logo {
  text-align:center;
  margin: 1.5em 1em 1.5em 1em;
}

.main-logo h1 {
  padding-top: .3em;
}



/*************************************************************
    NAV
*************************************************************/

.main-nav {
  margin-bottom: 1.1em;
}

.main-nav li {
    background-color:#543976;
    text-align:center;
    padding: 10px;
    margin: 5px 2em;
    border-radius:5px;
  }
.main-nav a {
  color:white;
}



/*************************************************************
    MAIN BANNER
*************************************************************/

.main-banner {
  display:none;
}



/*************************************************************
    COLUMN STYLES
*************************************************************/

.col {
  padding: 0 1% 0 1%;
}



/*************************************************************
    FOOTER
*************************************************************/

.back-to-top {
    text-align: center;
  padding:.5em;
}

.main-footer {
  text-align:center;
}
.main-footer li{
  padding:1em;
}



/*************************************************************
    MEDIA QUERIES
*************************************************************/


/*Clearfix*/
.group:after {
  content:"";
  display:table;
  clear:both;
}

@media (min-width: 461px) {

/*HEADER STYLING*/

  .main-header {
    padding-top:1px; /*to prevent margin collapse*/
  }

  main-nav,
  .main-nav li {
    display: inline-block;
  }

  .main-nav {
    text-align:center;
    margin-bottom: .5em;
  }

  .main-nav li {
    margin: .1em;
    padding: .625em 1.4em;
  }

  /*MAIN IMAGE SWITCHES TO MAIN BANNER*/
  #learn-english img:first-child{
    display:none;
  }

  .main-banner {
    display:block;
  }

  .main-banner img {
    width: 100%;
  }

  /*COLUMN STYLING: FLOATS*/

  .primary-content {
    float:left;
    width: 58%;
  }

  .secondary-content {
    float:right;
    width:38%;
  }
}

  /*COLUMN STYLING: INLINE BLOCKS*/
/*.col {
  display:inline-block;
  vertical-align:top;
  margin-right: -.3125em;*/ /*-5px whitespace: 5/16 (current font-size)=0.3125*/
  /*}

  .primary-content {
    width:58%;
  }
  .secondary-content {
    width:38%;
  }
}*/



/*COLUMN STYLING: ABSOLUTE POSITIONING*/


  /*.content-row {
    position:relative;
    min-height: 950px;
  }
  .secondary-content {
    position:absolute;
    right:0;
    width:38%;
  }

  .back-to-top {
    position:relative;*/ /*works, but I have no idea why!*/
  /*}

  .primary-content {
    position:absolute;
    left:0;
    width:58%;
  }
}*/

@media (min-width: 915px) {

  .main-logo {
    display:inline-block;
  }

  .main-nav {
    float:right;
    margin-top:-80px;
  }

  .main-nav li {
    margin:5px;
    padding:13px 25px;
  }
}

9 Answers

Jorge Barrios
Jorge Barrios
8,278 Points

I investigate a little more about this and there are is people with this error http://stackoverflow.com/questions/6560629/webkit-float-and-display.

You can work around it for example the fix i did previously (remove the -80px and chage it for 80px) if you like that quick fix or you could make the div with the logo also floating element (left), as a web developers we should work around this problems there are to many browser and sometimes like this one, they wont behave in the same way this time its chrome giving us a hard time sometimes will be firefox, safari or IE (most likely)

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Hey that's great, Jorge. That link does indeed show the identical problem. From reading that I realised that I didn't do anything wrong, it's just a bug. Great!

After experimenting with a few different things (as suggested in that post), I found the best solution is to float the logo left, the nav right, and apply the .group class clearfix to the .main-header. Then, just adjusting the top margin of the nav gives a PERFECT result in all situations (although I haven't test different browsers, but I think it should be ok). Great!

Strangely, in codepen the nav needs 70px top margin, but loading it all into my browser it needs 135px top margin. Strange! BUT IT'S FINE FOR NOW!

Paul Shields
Paul Shields
10,066 Points
Paul Shields
Paul Shields
10,066 Points

It looks like the nav bar is initially being placed offscreen.

Way down at the bottom of your main.css under @media (min-width: 915px):.main-nav (2nd from the bottom) you have your margin-top property set to -80px, which looks like it is sending it offscreen until the browser size is changed.

Jorge Barrios
Jorge Barrios
8,278 Points
Jorge Barrios
Jorge Barrios
8,278 Points

I fixed by changing this 

   .main-nav {    
    margin-top:-80px;
      display: inline-block;
      padding-left: 170px;
  }

line 224 of your main.css

i don't know why your float was acting weird but I solved by making it a inline-block and adding a padding left since your layout wont change beyond that breaking point I don't think it will be a problem to use a fixed length for the padding

Andrew Stelmach
Andrew Stelmach
12,583 Points

Thanks for this, Jorge. This works as a fix, but I'd like to know why it happened in the first place really, so I can stop it happening in the future.

I think I must be doing something fundamentally WRONG here, and I want to know what it is.

Jorge Barrios
Jorge Barrios
8,278 Points

Hi Andrew, I give it a second look to your code, i don't know how i didn't notice it before you can fix it just by making the margin-top value 80px instead of -80px, that all you weren't doing anything fundamentally wrong, you wanted to move the .main-div to the bottom of the container so you needed a positive margin-top to fill that gap.

update: after re sizing on chrome the nav bar dropped again i tried this on Firefox and IE and it work well, i think it maybe and error on the chrome rendering engine. I investigate a little more about this and there are is people with this error http://stackoverflow.com/questions/6560629/webkit-float-and-display

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

I've made a codepen to make it a bit easier for people:

http://codepen.io/andrew_stelmach/pen/nBorK

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Lol yes, you get the same problem, but kind of in reverse when you do that in codepen. It seems fine to start with, but then when you resize the browser down back up again, it's off the top of the page again!

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

I'm sure it's some sort of weird margin collapse thing, Jorge, but I can't work it out. I've done something fundamentally wrong during the build.

Jorge Barrios
Jorge Barrios
8,278 Points

I investigate a little more about this and there are is people with this error http://stackoverflow.com/questions/6560629/webkit-float-and-display.

You can work around it for example the fix i did previously (remove the -80px and chage it for 80px) if you like that quick fix or you could make the div with the logo also floating element (left), as a web developers we should work around this problems there are to many browser and sometimes like this one, they wont behave in the same way this time its chrome giving us a hard time sometimes will be firefox, safari or IE (most likely)

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

12 points coming your way, Jorge ;-)

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Hey Jorge, if you post that forum link again in a separate answer, I can give it 'Best Answer'.