CSS help positioning divs inline

Question

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;
}

Answer 1

display them inline using the following css code: display: inline & float: left

Aside... You are actually floating the element, not displaying it inline. The display:inline rule is irrelevant here since floated elements are implicitly displayed as block.

But anyway, your problem is that your sections are all of a fixed width (200 + 560 + 200 = 960px), so when the browser window reduces to near this width (960px plus a bit more for your page margins) the design is going to break - your containers wrap.

If you still want these containers to be fixed width and to simply be cropped on a smaller browser window then you could perhaps add overflow:hidden to your #Header. At least then it won't push the #Header height down beyond 80px (which is a problem you seem to be experiencing). But content will be hidden on the smaller screen.

Or, make all your column containers dynamic and give them percentage widths, so that they flex with the available width. eg. 20%, 60% and 20% respectively. Although this might make the widths too small or too large at some window sizes. You could add a min-width and max-width (with an absolute amount) to limit this. But at narrow widths height:80px is not going to be enough, so min-height:80px would perhaps be more appropriate, if your design allows for your #Header to be flexible?

Answer 2

With the percentage, be sure to no have padding on your columns. The padding will be add some width. For your header, you can use the position:fixed, and for IE6 and 7 use position: absolute ( the position :fixed ) doesn't work for them. For the columns, you can add the clearfix method who can help you for placing without problem the rest of the content. Your HTML can be something like this :

<div id="header" class="clearfix">
  <div id="col01">Column 01</div>
  <div id="col02">Column 02</div>
  <div id="col03">Colunm 03</div>
</div>

And the CSS :

    #header {
    position: fixed;
    height:80px;
    width:100%;
    }

    #col01,
    #col02,
    #col03 {
    float:left;
    }
    #col01,
    #col03 {
    width:20%;
    }
    #col02 {
    width:60%;
    }
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    html[xmlns] .clearfix {
        display: block;
    }


* html .clearfix {
    height: 1%;
}

Hope it's helping you :-)