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">
</div>
<div class="searchbar-wrapper">
</div>
<div class="profile-menu-wrapper">
</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;
}
