css inline positioning of divs

Question

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;
}

score 3 · Accepted Answer · edited May 23 '17 at 12:03

3

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.

edited May 23 '17 at 12:03

Community

1
1

answered Jan 18 '12 at 23:56

Joseph

117,725
30
181
234

a kinda want to die at least it does work like i think it does :) thanks fskreuz – eran otzap Jan 19 '12 at 00:09
@eranotzer it's the simplest things we tend to overlook :) – Joseph Jan 19 '12 at 00:26

Remy Strijker · Answer 2 · 2012-01-19T00:16:40.690

0

It is stange that your #header has a width of 200 pixels and the child #header-left 250 pixels, but apart from that I think it's better to use a float. This means that the two divs are next to each other:

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

div#header div#header-left div#slogan
{
    float: left;
    height: inherit;
    width:100px;
}

And you nead a clear in your html/css:

.clear_left { clear: left; }

And the html:

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

edited Jan 19 '12 at 00:16

answered Jan 18 '12 at 23:58

Remy Strijker

261
3
19

i didn't wan't to use floats so i don't have to clear nothing the headers width is not set and so it is a block which is automatically set to 100% width the others are just explanatory values to show that they do indeed fit. – eran otzap Jan 19 '12 at 00:10
@eranotzer Why don't you want to use floats? An inline-block is not supported by every browser. – Remy Strijker Jan 19 '12 at 00:11
i don't know how to . :) and i read that they should be avoided . and when i was a child a float molested me from the left and right and the scars haven't cleared to this day. – eran otzap Jan 19 '12 at 00:15
@eranotzer I don't recommend you to use inline-blocks, I think you should read this article: http://www.alistapart.com/articles/css-floats-101/ it is very informative! – Remy Strijker Jan 19 '12 at 00:17
@RemyStrijker actually you should go for inline-block. that's what it was made for: *"The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element"* http://www.w3schools.com/cssref/pr_class_display.asp AND never worry about cross-browser compatibility. check this to see what's the lowest browser you should develop for compatibility http://gs.statcounter.com/#browser_version-ww-monthly-201110-201112-bar AFAIK, only IE7 and older has issues with inline-blocks. – Joseph Jan 19 '12 at 00:36
@fskreuz I see, but sadly there are people who use Ie7 but Ie8. But Ie is always a problem! ;-) – Remy Strijker Jan 19 '12 at 00:59

css inline positioning of divs

2 Answers2