Align 3 Divs Inline

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%) t

Solution 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/

Solution 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.

Solution 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.

Solution 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.

Solution 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>