I'm facing an issue with the positioning of elements that I don't usually encounter. I simply want the subscribe button to be 20% wide and positioned to the left of the input form.
Despite trying various methods like block display, inline, or float left, nothing seems to work as expected in this case.
I can't figure out why, but ever since I added the Mailchimp code, the input form remains unchanged while the button displays wider on the line below. I've made sure to set the correct ids and classes according to the internal stylesheet, not Mailchimp's.
Why is this element not adhering to basic styling rules? Am I overlooking something simple?
Any help would be greatly appreciated, thank you.
#newsletter {
background: lightblue;
width: 56%;
height: 100%;
padding: 0 0 0 25px;
display: table-cell;
}
.f1 {
display: block;
text-transform: uppercase;
color: darkblue;
font-size: 20px;
line-height: 1;
padding-bottom: 15px;
}
.f2 {}
#f-sm,
#f-em {
padding-top: 15px;
display: block;
}
#f-em form input {
margin: 0;
width: 80%;
height: 30px;
background: pink;
float: left;
}
#newsletter-button {
width: 20%;
height: 30px;
float: left;
background: lightblue;
}<div id="newsletter">
<span class="f1">Newsletter Signup</span>
<span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare...</span>
<span id="f-em">
<form action="action_here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<input type="submit" value="Subscribe" name="subscribe" id="newsletter-button">
</form>
</span>
<div class="clear"></div>
</div>