CSS: Placing Divs Left/Center/Right Inside Header

CSS: Placing divs left/center/right inside header

Utilize the Magic of Overflow: Hidden

If you can swap the html position of 2 & 3 like so:

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.

How to align 3 divs (left/center/right) inside another div?

With that CSS, put your divs like so (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

Positioning three divs left, center and right

To place the inner divs side-by-side, and keeping it fluid, use the css display properties table and table-cell.

.nav {
    display: table;
    width: 100%;
}

.nav > div {
    display: table-cell;
}

Remove all the floats and stuff, and let the nav work like a table, placing it's children side by side like inline cells...

Here's a simple example of how it works (without all of your styling): http://jsfiddle.net/1co0qLx9/

Align div to the right end and header to the centre in a container

Here is a flexbox Example using an empty div as a "spacer" Element. I left comments in the code that explain what the code below them does. I added colors to some elements so you can see what happens to them.

.header {
  text-align: center;
}
.header-wrapper {
  display: flex;
  /*We want 1 row and we dont want items to wrap into other rows*/
  flex-flow: row nowrap;
  width: 100%;
  background-color: green;
  /*Positions elements to the start, end and whatever is between while keeping some space between them */
  justify-content: space-between; 
  /*You can add this if you also want to horizontally align items*/
  align-items: center;
}
/*gives all divs (the spacer and the checbox-div) inside of the header-wrapper the same size and leaves the rest of space for the header, with this the header is centered and looks better*/
.header-wrapper div {
    width: 33%;
}
.checkbox-div {  
  background-color: red;
}

<div class="header-wrapper">
  <!--Add an empty container to fill in the place on the left-->
  <div class="empty-div"></div>
   <h2 class="header">Header</h2>
   <div class="checkbox-div">
     <input type="checkbox" class="checkbox" value="Some Value" id="checkbox">
     <label for="sub-folder-checkbox">Some Name</label>
   </div>
</div>

<header>
    <div class="left">LEFT ALSO PUSHES CENTER DIV</div>
    <div class="right">RIGHT PUSHES CENTER DIV</div>
    <div class="center">CENTER</div>
</header>

header {
    color:white;
    position: absolute;
    text-align: center;
    left: 0;
    width:100%;
    top: 0;
    background-color: #2995f3;
}
.center {
    clear:both;
    display: inline-block;
    background:green;
}
.left {
    float: left;
    background:grey;
    display:inline-block;
}
.right {
    float: right;
    background:red;
    display:inline-block;
}

#header-wrap {  display: flex;                   /* 1 */  align-items: flex-start;         /* 2 */  justify-content: space-between;  /* 3 */  text-align: center;  padding: 1rem 0;}
#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }.header-left   { border: 1px solid red; width: 100px; }.header-right  { border: 1px solid red; width: 100px; }.header-center { border: 1px solid red; width: 100px; }

<section id="header-blue">  <div id="header-wrap">    <div class="header-left">      <p>1</p>    </div>    <div class="header-center">      <p>2</p>      <p>2</p>      <p>2</p>      <p>2</p>    </div>    <div class="header-right">      <p>3</p>      <p>3</p>    </div>  </div></section>

.wrapper {    color: #fff;    float: left;    text-align: center;    width: 100%;}.header {    background-color: red;    float: left;    width: 100%;}.left {    background-color: orange;    float: left;    width: 25%;}.center {    background-color: green;    float: left;    width: 50%;}.right {    background-color: orange;    float: left;    width: 25%;}.footer {    background-color: blue;    float: left;    width: 100%;}.header, .footer {    margin: 1% 0;}

<div class="wrapper">    <div class="header">        <h1>Header Div</h1>    </div>    <div class="left">        <h1>Left Div</h1>    </div>    <div class="center">        <h1>Center Div</h1>    </div>    <div class="right">        <h1>Right Div</h1>    </div>    <div class="footer">        <h1>Footer Div</h1>    </div></div>