CODEWITHSUNDEEP
htmlcss
ekolis
ekolis

Reputation: 6776

display: inline-block is not placing my div on the same line as the previous div

I have code which looks like the following:

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

#formLogin {
  display: inline-block;
}
<div class="content">
  <img src="images/logo.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>

And I'm trying to get the DigiCert <a> tag to appear to the right of the <form> rather than on its own line.

However when I set them to display: inline-block; that does nothing; they still appear on separate lines.

How do I make the link appear to the right of the form? I can't do float: right; because the script tag contains code that inserts elements dynamically in the DOM, and that causes the form to jump around on the page.

Upvotes: 4

Views: 123

Answers (2)

Wassim Al Ahmad
Wassim Al Ahmad

Reputation: 1094

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

Upvotes: 2

Daehue Kim
Daehue Kim

Reputation: 64

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>

Upvotes: 0

Related Questions