Nitish Nitish - 7 months ago 15
HTML Question

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

Answer

Depending on what you're going for:

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

or

.header__region {
    display: inline-block;
}
Comments