Search code examples
htmlcsspositioning

css inline positioning of divs

i'm attempting to create an header which is divided into 3 divs they will all be set to display: inline-block the left header part will contain a slogan and a logo which i wan't the slogan to be at the right of the logo

the problem is my logo div and my slogan div are always placed one on top of the other .

to my understanding an inline element would be placed next to the last inline element with in the same block , notice that the header-left div has 250px width and each of the child div's have 100px width so why are they not placed one next to the other ?

my markup :

  <div id="header">
       <div id="header-left">
              <div id="logo" />
              <div id="slogan">
                 <span> Buy For U</span>           
              </div>
       </div>  
 </div>

my css :

div#header
{
    border: 1px solid black ;
    height: 200px;
}
div#header div#header-left
{
    display: inline-block;    
    height: 100%;
    width: 250px;

}
div#header div#header-left div#logo
{
    display: inline-block;
    background: url("Google-Desktop-64.png") no-repeat center;
    background-size: 25%;
    height: inherit;
    width: 100px;
}
div#header div#header-left div#slogan
{
    display: inline-block;
    height: inherit;
    width:100px;
}
Solution

  • everything's fine. just close the logo's <div> properly. "self-closing" tags.

    <div id="header">
       <div id="header-left">
              <div id="logo"></div>
              <div id="slogan">
                 <span> Buy For U</span>           
              </div>
       </div>  
 </div>

    i also suggest using an <img> for the logo (and make it a link to homepage) rather than just a background. empty <div> tags are prone to errors during validation.