Simple block positioning

Question

So, here is what I have:

<div class="header">
  <div id="logo">
    <img src="logo.jpg">
  </div>
  <div id="title">
    <img src="title.png">    
  </div>
</div>

I need to align title.png to center, with logo.jpg left to him, with some padding. What is the best way to do that using CSS?

Answer 1

.header {
  position: relative; /* so logo can be positioned inside this */
  text-align: center; /* to center the inline-block (title) */
  background: #eee;
  border: 1px solid #000;
  padding: 5px; /* as required */
}

#title {display: inline-block;}
#title {display: inline !ie7;} /* IE6/7 hack to make inline-block work */

#logo {
  position: absolute; 
  left: 5px; /* match the padding value */
  top: 5px; /* match the padding value */
}

is something like that the idea?

Example Fiddle : HERE

if the above is the required look, it can simplified greatly by removing the divs (no need for IE hacks) to just use the image elements themselves

<div class="header">
  <img src="http://dummyimage.com/150x50/000/fff&text=LOGO" id="logo">
  <img src="http://dummyimage.com/350x50/DAD/fff&text=Title" id="title">
</div>

.header {
  position: relative; /* so logo can be positioned */
  text-align: center; /* naturally centre the title image */
  background: #eee;
  border: 1px solid #000;
  padding: 5px;
}

#logo {position: absolute; left: 5px; top: 5px;}