html - set three header div's 25% 50% 25% Horizontally -

I want to set 25% 50% 25% of the horizontal horizontally, show them three The header is placed in the divider's head, with the same CSS, but div is displayed vertically.

Checked the previous answers that I could not get the lead, please give me an instruction. Thanks

HTML code:

  & lt; Div id = "header" & gt; & Lt; Div id = "header-left" class = "div-border" & gt; & Lt; H6 align = "center" & gt; Image holder & lt; / H6 & gt; & Lt; / Div & gt; & Lt; Div id = "header-middle" class = "div-border" & gt; & Lt; H1 align = "center" & gt; Dashboard & lt; / H1> & Lt; / Div & gt; & Lt; Div id = "header-right" class = "div-border" & gt; & Lt; H6 & gt; & Lt; Span & gt; & Lt; Period style = "row-height: 24px;" Id = "around border" & gt; & Lt; B & gt; Profile | Help | Admin & lt; / B & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / H6 & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS code:

  #header {background-color: # fecb00; White color; Text-align: center; Padding: 5px; } #header-left {width: 25%; } # Header-Medium {Width: 50%; } #header-right {width: 25%; } .Dive-boundary {boundary: 2px solid silver; } # Border-around {boundary: 1px solid # 000; }  

You have to set box-sizing: border-box Width, vertical-align: middle and divs to display the elements, to show the elements display: inline- Set the box .

  .dev-border {box-size: border-box; Display: Inline-block; Vertical-row: middle; }  

Object: