Aligning button and input box inline

  • Resolved jennybhatt

    (@jennybhatt)


    11 years, 4 months ago

    Would appreciate any help with this, folks.

    I think there should be an easy fix for this, but I cannot figure it out.

    Link: https://storyacious.com/storyacious-practices-on-writing-vignettes/

    At the bottom of the post, I have a widget with a subscribe form. I need the subscribe button to be inline with the email address input box. I’ve tried all kinds of things and spent the entire morning googling but cannot find a simple workable solution.

    My HTML and CSS codes are below.

    ?[ Moderator note: please wrap code in backticks or use the code button. ]

    /* optin2 HTML */
<div id="optin2">
<form action="https://storyacious.us6.list-manage.com/subscribe/post?u=16b93bbd03566c7becc6bd172&id=b534f6c526" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" SIZE="15" value="Type email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<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="mc-embedded-subscribe" class="button">
</form>
</div>
/* End optin2 HTML */

/* optin2 CSS */
#optin2 {
background: #6c6c6c url(wp-content/uploads/mc-images/gloss.png) no-repeat bottom center;
border-bottom: 25px solid #6c6c6c;
color: #fff;
padding: 10px 15px 20px;
text-shadow: 1px 1px #111;
}

#optin2 input {
border: 1px solid #585858;
font-size: 13px;
margin-bottom: 10px;
padding: 8px 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #5a5a5a;
-moz-box-shadow: 0 2px 2px #5a5a5a;
-webkit-box-shadow: 0 2px 2px #5a5a5a;
width: 40%;
float: left;
}

#optin2 input.email {
    background: #ffffff;
    padding-left: 15px;
}

#optin2 input[type="submit"] {
background: #f6640e url(wp-content/uploads/mc-images/orange.png) repeat-x top;
border: none;
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: bold;
padding: 8px 0;
text-shadow: none;
text-transform: uppercase;
width: 20%;
margin-top: 5px;
margin-left: 5px;
}

#optin2 input[type="submit"]:hover {
    color: #ffdeb3
}
/* End optin2 CSS */
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi, try this:

    In:

    ?[ Moderator note: please wrap code in backticks or use the code button. ]

    #optin2 input[type="submit"] {

}

    Add:

    float: right;

    You also will have to add this along with the code above:

    #optin2 input {
border: 1px solid #585858;
font-size: 13px;
margin-bottom: -31px;
padding: 8px 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 2px 2px #5a5a5a;
-moz-box-shadow: 0 2px 2px #5a5a5a;
-webkit-box-shadow: 0 2px 2px #5a5a5a;
width: 40%;
float: left;
}

    The key is to change margin-bottom.

    LOL I have tried 2 different things already and the above does not quite work. I deleted my first suggestions.

    (I can edit your css on my local computer)

    But I found what does work:

    In

    https://storyacious.com/wp-content/themes/gridiculous-pro/style.css?ver=3.6.1

    on line 101

    change to:

    ?[ Moderator note: please wrap code in backticks or use the code button. ]

    .clear {
    clear: none;
}

    However, this will change the css for all divs that use clear though on the whole site which is not good.

    So you will need to add some css that affects only the clear in that div.

    The div is:

    <div id="mce-responses" class="clear">

    and is under:

    <div id="optin2">

    So the css needs to be something like:

    #optin2 .clear {
    clear: none;
}

    This seems to work as far as I can test on my local computer.

    Note that you need to add this, not change any existing css.

    Thread Starter jennybhatt

    (@jennybhatt)

    Thank you, wpfan1000 and graphical_force.

    I tried the last option from wpfan1000 of adding the following to my custom css:

    #optin2 .clear {
clear: none;
}

    That seems to have done the trick.

    But, I’m going to save the other option from you, graphical_force, just in case I need it.

    Thank you both so much for the help. I can’t believe that I spent the entire morning on this.

    Hey, glad it worked! ??

    Dear moderator (not sure of your name)

    I have tried putting code in backticks and it dont seem to work for me.

    Trying again:

    code

    Edit:
    Ok LOL now it works, I see you put each backtick on a separate line, maybe that is what I did not do correctly in the past….

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Aligning button and input box inline’ is closed to new replies.