Skip to content Skip to sidebar Skip to footer

Display: Inline-block Is Not Placing My Div On The Same Line As The Previous Div

I have code which looks like the following: And I'm trying to get the DigiCert tag to appear to the right of the
rather than on its own line. However when I

Solution 1:

what do you want exactly? please try this code

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: super;
}

#formLogin {
    display: inline-block;
}
<div class="content">
<img src="https://i347.photobucket.com/albums/p450/wassimahmad/logo_zpsxkwqnisr.png" />
    <form name="formLogin" id="formLogin" method="post" action="Login.aspx">
        
    </form>
    <!-- Begin DigiCert site seal HTML and JavaScript -->
    <div id="DigiCertBlahBlah" data-language="en_US">
        <a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
    </div>
    <script type="text/javascript">
        
    </script>
    <!-- End DigiCert site seal HTML and JavaScript -->
</div>

**You can replace on css

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: bottom;
}

**

**or this **

#DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    vertical-align: middle; 
}

Solution 2:

How about this ?

<style>
  .content {
    width: 100%
    max-width: 800px; // you can remove this if you want to use full width
    margin: 0px auto;
  }
  .div-row {
    width: 100%;
  }
  #DigiCertBlahBlah {
    display: inline-block;
    width: 200px;
    margin: 0px;
    float: left;
  }

  #formLogin {
    display: inline-block;
    width: calc(100% - 200px);
    margin: 0px;
    float: left;
  }
</style>
<div class="content">
  <div class = "div-row">
    <img src="images/logo.png" />
  </div>
  <div class = "div-row">
    <form name="formLogin" id="formLogin" method="post" action="Login.aspx">
        ...
    </form>
    <!-- Begin DigiCert site seal HTML and JavaScript -->
    <div id="DigiCertBlahBlah" data-language="en_US">
        <a href="http://www.digicert.com/unified-communications-ssl-tls.htm">UCC SSL</a>
    </div>
  </div>
    <script type="text/javascript">
        ...
    </script>
    <!-- End DigiCert site seal HTML and JavaScript -->
</div>

Post a Comment for "Display: Inline-block Is Not Placing My Div On The Same Line As The Previous Div"