I need help with a recurring problem that happens a lot. I want to create a header that consists of 3 sections which are positioned inline. I display them inline using the following css code: display: inline & float: leftThe problem is that when I resize my browser window the last div is pushed down and isn't displayed inline. I know it sounds like I'm being picky, but I don't want the design to distort as the visitor change's the monitor screen. I have provided the html and css code below that I am working with below. Hopefully I have explained this well enough. Thanks in advance.

HTML

<div class="masthead-wrapper">
&nbsp;
</div>

<div class="searchbar-wrapper">
&nbsp;
</div>

<div class="profile-menu-wrapper">
&nbsp;
</div>

CSS

#Header {
  display: block;
  width: 100%;
  height: 80px;
  background: #C0C0C0;
}
.masthead-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #3b5998;
}
.searchbar-wrapper {
  display: inline;
  float: left;
  width: 560px;
  height: 80px;
  background: #FF0000;
}
.profile-menu-wrapper {
  display: inline;
  float: left;
  width: 200px;
  height: 80px;
  background: #00FF00;
}