Mbaku Ngoma Mbaku Ngoma - 1 month ago 25
HTML Question

Div inline not working

I want to display the menu in inline form but it's not working .Any help ?(Don't worry about the pictures).Here is a screenshot of what I want to achieve.The "As seen " will occupy the red holder on the screenshot.



<div class="header" style="display:inline;">

<div style="font-size:26px;">
<span> As seen on</span>
</div>

<div>
<a href="https://www.marketingignite.com/basic-commonsensical-seo-tips-and-tricks/" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/marketing_ignite_logo.png" /></a>
</div>

<div>
<a href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="Logo Buyseoleads"></a>
</div>

<div class="seenBefore2" style="font-size:26px;">
<span>As seen on</span>
</div>

<div>
<a href="http://www.releasewire.com/press-releases/explaining-the-advantage-of-verified-and-exclusive-ppc-and-seo-leads-how-buy-seo-leads-helps-agencies-achieve-greater-success-and-conversions-549381.htm" target="_blank"><img style="vertical-align: middle; background-color:#000;" src="<?php echo get_template_directory_uri(); ?>/images/release_wire_logo.png"/></a>
<!--img src="<?php //echo get_template_directory_uri(); ?>/images/daily-news-newspaper-headline.jpg" alt="Daily News Newspaper Headline"-->
</div>

</div>




Answer

Not a lot to go on here but I'll give it a try.

Every <div> has block context by default. Setting display: inline; on a parent <div> will not get inherited by child <div>s. Apply display: inline; to all <div>. I would use <span> in this case instead of <div> as it's an inline element by default and won't try to take up the whole width of the parent element by default.

Actually I would change the markup a bit if you're Looking to create a menu. Use <nav>, <ul>, <li>, <a> etc. instead.

Here is an example of improved markup.

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  padding: 3px 6px;
  float: left;
}
li img {
  vertical-align: middle;
}
<header>

  <nav>
    <ul>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/ffcc00/">
        </a>
      </li>
      <li>As seen on
        <a href="#">
          <img src="http://placehold.it/50x50/cc0000/">
        </a>
      </li>
    </ul>
  </nav>

</header>