user3467855 user3467855 - 2 months ago 9
CSS Question

Display inline-block and float left issues

I am trying to align 3 elements, 1 from a div and another 2 from another div. They all need to be inlined, the issue is with using float left and inline-block only 2 of them get inline. I can't do any modification to the HTML side

FiDDLE -> https://jsfiddle.net/75gg6cwp/2/

LIVE SITE: http://newskillsacademy.co.uk/

EXPECTED OUTPUT: https://form.jotform.com/62644280988973

HTML

<div id="ssp-1786600221-487496969" class="simplesignuppro ssp_embed" style="width: 100%; position: static; opacity: 1; margin: 0px auto; transition: all 0s ease-in 0s; animation-duration: 0s; animation-timing-function: linear; animation-delay: 0s;">
<div class="mc_embed_signup">
<div class="mc_embed_signup_inner" style="box-shadow: none; background: rgb(244, 247, 249); border-radius: 4px;">
<form onsubmit="return false;" method="post" class="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">
<div class="inside-form">
<h2 class="-default3" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: normal; font-family: Roboto, serif;"></h2>
<div class="mc-field-group">
<div class="signup">
<div class="-default2">
<input type="text" value="" name="firstnamesub" class="firstnamesub customfields" placeholder="First Name" style="margin-bottom: 0px; border-radius: 3px; font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; font-family: Roboto, serif;">
</div>
<div class="ssp-email-row -default4">
<input type="email" value="" name="ssp_email" class="ssp_email mce-EMAIL" placeholder="Your Email" style="font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-family: Roboto, serif;">
<input type="submit" value="Submit" name="subscribe" class="subscribe button" style="margin-top: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: rgb(199, 18, 47); color: rgb(255, 255, 255); font-family: Roboto, serif;">
</div>
</div>
<div class="ssp_social_login -default4"></div>
</div>
<div class="clear mce-responses">
<div class="response mce-error-response" style="display:none"></div>
<div class="response mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_59e5bbfbcc749fdb8fe68637a_b9c0fde42d" value="" style="font-family: Roboto, serif;"><img width="1" height="1" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAATSURBVHjaYvj//z8DAAAA//8DAAj8Av7TpXVhAAAAAElFTkSuQmCC"></div>
</div>
</form>
</div>
</div>
</div>


CSS

.ssp-email-row.-default1 {
width: 28% !important;
}
.-default1 {
width: 28%
}

.signup > div {
float: left;
width: 28.5% !important;
}

Answer

To fix this you will need:

  1. To set the 2nd div (the container of the 2 inputs) to be X2 in width (57% instead of 28.5%)
  2. Set the inputs inside that div to float left and width of 49% (instead of 100%) (keep some space for padding/border/etc).

This is the code:

.signup > div:nth-child(2) {
    width: 57% !important;
}
.signup > div:nth-child(2) input {
    width: 49% !important;
    float: left;
    clear: none;
}

Here is an example:
https://jsfiddle.net/jw2qnuyd/