CODEWITHSUNDEEP
htmlcssclassinline
Nitish
Nitish

Reputation: 2763

CSS divs not displaying inline

I have a HTML page like below:

<div id="header-wrapper">
  <header class="header" id="header" role="banner">

    <div class="logo-slogan-wrapper">
        <a href="/d7/" title="Home" rel="home" class="header__logo" id="logo">
            <img src="http://localhost/d7/sites/all/themes/zensub/logo.png" alt="Home" class="header__logo-image" />
        </a>
        <div class="header__name-and-slogan" id="name-and-slogan">
            <h1 class="header__site-name" id="site-name">
                <a href="/d7/" title="Home" class="header__site-link" rel="home"><span>D7</span></a>
            </h1>
         </div>
     </div>    
     <div class="header__region region region-header">
        <div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">
            <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
                <ul class="menu">
                    <li class="menu__item is-active is-leaf first leaf active menu-mlid-218"><a href="/d7/" class="menu__link active">Home</a></li>
                    <li class="menu__item is-leaf leaf menu-mlid-315"><a href="/d7/?q=about-us" class="menu__link">About</a></li>
                    <li class="menu__item is-leaf leaf menu-mlid-316"><a href="/d7/?q=contact-us" class="menu__link">Contact</a></li>
                    <li class="menu__item is-leaf last leaf menu-mlid-317"><a href="/d7/?q=prestashop-news" class="menu__link">Prestashop News</a></li>
                </ul>
           </div>
        </div>
  </div>

  </header>
</div>

And my CSS is :

#header-wrapper{
    background:#F7F7F7;
    width:100%;
}
#header{
    width:1150px;
    margin:0 auto;
}
.logo-slogan-wrapper
{
    display:inline;
    background:#555;

}
.header__region
{
    display:inline;
    background:#99CC33;
}

#logo,#name-and-slogan,#site-name,#site-slogan
{
    display:inline;
}

.menu-block-wrapper{
    float:left;
    padding:10px 0;
}
.menu li{
    display:inline;
    list-style:none;
    margin-left:10px;

I was expecting the name,slogan and the menu to be inline. But instead , the menu is not coming inline and the background:#99CC33; for div header__region is not changing to the desired background color ! How can I overcome these problems ?Output of the code

Upvotes: 1

Views: 5709

Answers (1)

Walter Roman
Walter Roman

Reputation: 4779

Depending on what you're going for:

.header__region {
    float:left;
    // or right
}

or

.header__region {
    display: inline-block;
}

Upvotes: 4

Related Questions