treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Why is this div not respecting it´s placement?

  • Can´t figure out why #major seems to start at the top of the page instead of under the #header, where it resides in my code. Can anyone explain what I´m doing wrong?

    http://johandahl.com/wp/portfolio/
  • It's because you have applied a float to the header. That takes it out of the flow of the document.

    Just remove it. You can probably lose the the display:inline too.
  • But the float is there because I´m using a grid system and the header has a full grid width. There must be a way to get it beneath the header even if the header is floated, no?
  • Regardless of what grid system your using you don't need to float an entire element unless something else is been floated directly after it so @Paulie_D is correct in what he was saying, i turned off display: inline and float: left and your layout still worked perfectly.
  • Alright, I´ll not use the grid on those elements then. Thanks.
  • If you really insist on keeping the float:left; on the #header, you can also solve this by applying another float:left; on the #major, or applying clear:both; to it.

    But yea, I'd follow the advice of the guys above me.