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
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"