align 3 divs inline - css

Question

i am trying to align 3 divs inline with each other
i have
#header {
width:100%;
height:160px;
}
as the main container so the container fits the width of the page (100%)
then
.header-left {
width:33%;
display:inline-block;
}
.logo {
width:409px; /* width of the logo */
margin:10px auto 0 auto;
display:inline-block;
}
.header-right {
width:33%;
display:inline-block;
}
for the 3 divs in the container.
I need the .logo div in the centre of the page and in between the other 2 divs, so then the 2 other divs either side of the logo div.
the logo div needs to be 409px as thats the width of the logo.
for some reason it is just all displaying to the left and i cannot work out why

Answer 1

One solution is possible if you arrange the header HTML as follows:
<header class="ex1">
<div class="header-left">the left stuff </div>
<div class="header-right">the right stuff</div>
<div class="logo"><img src="http://placehold.it/409x138" ></div>
</header>
and apply the following CSS:
header {
border: 1px solid blue;
width: 100%;
min-width: 800px;
height: 160px;
overflow: auto;
}
.ex1 .header-left {
display:inline-block;
width: 33%;
max-width: 190px;
background-color: gray;
float: left;
}
.ex1 .logo {
width: 409px; /* width of the logo */
margin:10px auto 0 auto;
border: 1px solid red;
}
.ex1 .logo img {
display: block;
}
.ex1 .header-right {
display:inline-block;
width: 33%;
max-width: 190px;
background-color: gray;
float: right;
}
Basically, you float the left header element to the left, the right element to the right,
and keep the logo element centered in the normal box flow.
Set the min-width to allow for a fixed with logo/banner image.
Fiddle reference: http://jsfiddle.net/audetwebdesign/Esst8/

Answer 2

In this context, what happen if 409px is more than 34% of total width ? it breaks.
Think about rewriting your html, it won't work this way.

Answer 3

Restructure and use Float
To get what you want, the best thing to do is restructure your HTML and make sure you set a min-width on the body. Something like this (as seen in this fiddle):
HTML
<div id="header">
<div class="header-left">LEFT</div>
<div class="header-right">RIGHT</div>
<div class="logo"><img src="images/logo" width="409" height="138" /></div>
</div>
Essential CSS
body {
min-width: 600px; /* some minimum greater than 409px */
}
.header-left {
float: left;
width: 50%;
margin-right: -204.5px;
border-right: 204.5px solid transprent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
width:409px; /* width of the logo */
margin:10px auto 0 auto;
position: relative;
z-index: 1;
}
.header-right {
float: right;
width: 50%;
margin-left: -204.5px;
border-left: 204.5px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Update: to keep it functioning "on-center," you have to account for the larger of the two side pieces in your min-width setting. So if you are putting some fixed width element on each side, then you need to calculate your min-width based on the larger of those two side elements by this formula:
((Larger side piece px) x 2) + 409px Logo = Minimum width
Don't forget to account for borders, etc. as needed in sizing that.

Answer 4

Use display: inline instead of display: inline-block for your div
Demo: http://jsfiddle.net/R65fA/1/
I just read #Milche Patern answer and notice that you use both percentage and fixed width for your child element. It's really bad idea. You better rewrite to make it standard.

Answer 5

#header{ width:100%}
.header-left {
width:33%;
float:left;
}
.logo {
width:34%; /* width of the logo */
margin:10px 0px 0px;
float:left; height:138px;
}
.header-right {
width:33%;
float:left;
}
.clr{ clear:both;}
HTML:
<div id="header">
<div class="header-left">LEFT</div>
<div class="header-right">RIGHT</div>
<div class="logo"><img src="images/logo" width="409" height="138" /></div>
<div class="clr"></div>
</div>