Aligning 3divs horizontally within a container

Question

How can I align a div container horizontally and within it 3 divs in css? See my concept: http://postimg.org/image/9el748gst/

   <div id="container">
           <div id="header"> HEADER </div>
           <div id="content"> CONTENT </div>
           <div id="footer"> FOOTER </div> 
   </div>

Sorry if I double-post, I just couldn't find the right way to do this. Thank you!

Answer 1

Roughly you can use something like this

Demo : http://jsbin.com/zuxunavi/1/

HTML :

<div id="container">
  <div id="header"> HEADER </div>
  <div id="content"> CONTENT </div>
  <div id="footer"> FOOTER </div> 
</div>

CSS :

#container{
  min-height:100px;
  height:auto !important;
  width:100%;
  margin:0 auto;
  background:#CCC;
  padding:5px;
  overflow:auto
}

#header{
  height:50px;
  background:#FF0000;
  width:95%;
  margin:2.5%;
}
#content{
  height:200px;
  background:#25AAE2;
  width:95%;
  margin:2.5%;
}

#footer{
  height:50px;
  background:#8CC63E;
  width:95%;
  margin:2.5%;
}

You can keep this as reference to develop your own html page. Hope this helps.