Title: CSS problem within one-line form
Last modified: August 20, 2016

---

# CSS problem within one-line form

 *  [PatMusic](https://wordpress.org/support/users/patmusic/)
 * (@patmusic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/)
 * Dear Developers,
 * first of all i wanted to thank you for this great plugin. I only have one problem
   which i can’t seem to find the right css markup to.
 * On my website [http://www.patberger.org/](http://www.patberger.org/) I put the
   mailchimp php implementation code into the header.php to display an email-adress-
   box and a subscribe-button in the upper right corner of my page. I disabled the
   error message but the success-message seems pretty essential to me and so i would
   like to keep it. This is where my troubles start.
 * When I do a CSS markup on the box and the button only everything looks as it 
   is supposed be. But than when i enter an email address and hit the subscribe-
   button the success-message kicks in and messes up everything.
 * I’d like the success-message to appeare in the center of the headline and the
   input box and submit button should stay in the corner aligned on the right.
 * Is it possible to do that by only using css? I’m not a programmer and so I don’t
   have php knowledge.
 * Have a nice 2013,
    Pat
 * [http://wordpress.org/extend/plugins/mailchimp/](http://wordpress.org/extend/plugins/mailchimp/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [PatMusic](https://wordpress.org/support/users/patmusic/)
 * (@patmusic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316485)
 * Is it possible to wrap a div container ONLY around the textbox and the button
   and float it to the right? Theoretically that should do the trick but i don’t
   know how i’d implement the plugin to that markup then.
 *  [mc_tak](https://wordpress.org/support/users/mc_tak/)
 * (@mc_tak)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316561)
 * Hey PatMusic,
 * Sorry for the delay in response. I went ahead and did a test ‘subscribe’ on the
   site, and it actually looks like the green success message is currently aligned
   to the right and showing up in the header bar. So it’s possible that you may 
   have already gotten this issue resolved.
 * If you’re still seeing issues or are looking to tweak something a bit with how
   it’s setup now, if you could describe in a bit more detail what you’re looking
   to do (like for example, if you’re looking to center it across the full page 
   width), I’d be happy to take a closer look.
 * Generally issues like the one you describe can be resolved by changing some CSS,
   but it ultimately depends on the nature of the elements around it, as well as
   the changes that need to be made. Just taking a glance at your site, it looks
   like there’s plenty of room to work with in that top area, so if you’re still
   seeing issues, feel free let us know!
 *  Thread Starter [PatMusic](https://wordpress.org/support/users/patmusic/)
 * (@patmusic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316564)
 * Hy mc_tak and thanks for your reply.
 * well, i had to take the site online due to scheduling reasons and so had to make
   the best fix temporarely. So, actually there is just one little thing that I 
   want to change right now 🙂
 * As you can see I aligned the plugin on the right of the header bar. The “subscribe”
   button comes first followed by the textfield where you type in your email address.
   When you hit “subscribe” the success message appeares on the left of the “subscribe”-
   button. So far so good 🙂
 * Now it would be great if could swap the order the email-address textfield and
   the “subscribe” button. Success message should appear where it appears right 
   now.
    To be more specific, i’d like to have the entire newsletter thing lined
   up like this:
 * |__Success message__| |__Email Adress__| |__Subscribe Button__|
 * instead of this:
 * |__Success message__| |__Subscribe Button__| |__Email Adress__|
 *  [mc_tak](https://wordpress.org/support/users/mc_tak/)
 * (@mc_tak)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316568)
 * Hey PatMusic,
 * It looks like there’s a bit of CSS code on the site that’s making it appear the
   way it is now. (in the order: success | subscribe | email field)
 * In taking a quick look at your site’s CSS by using _inspect element_ in my browser,
   I’m seeing two things that stick out. Both the “mc_merge_var” and “mc_signup_submit”
   classes are set to “float:right;”. If you set those to “float:left” instead, 
   you should see that start to display in the order that you’d like.
 * As a quick demonstration, I downloaded your HTML code and added the following
   CSS:
    .mc_merge_var{ float:left !important; }
 *  .mc_signup_submit{
    float:left !important; }
 * And it ordered the buttons in the desired way ( success | email | subscribe).
   I wouldn’t recommend the above code for your live site, as it uses !important,
   so I’d recommend finding where those are being set to float right and change 
   them accordingly.
 * If you have questions, let me know!
 *  Thread Starter [PatMusic](https://wordpress.org/support/users/patmusic/)
 * (@patmusic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316569)
 * float:left won’t do the trick the right way in this case. I had to add a fixed
   width of 600px to #mc_signup_form in order to have some space for the success-
   message:
    Here is the code:
 * #mc_signup_form {
    float: right; width: 600px; }
 * When I apply “float:left” to mc_merge_var and mc_signup_submit the email-textbox
   is aligning on the left side of the 600px width div container. The result is 
   that there is a huge space between “Email Adress” textbox and the submit-button.
   Unless the success message shows up and fills this space the form looks quite
   messy.
 * If I delete the fixed width, i’m having trouble with the success message. It’s
   showing up exactly where the submit button and textfield are.
 *  Thread Starter [PatMusic](https://wordpress.org/support/users/patmusic/)
 * (@patmusic)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316570)
 * Where can i edit the following divs? I can’t find them in the css but they’re
   showing up in firebug and if could edit them, that could be the solution 🙂
 * 1) div.mc_form_inside
    2) div#mc_message.updated
 *  [mc_tak](https://wordpress.org/support/users/mc_tak/)
 * (@mc_tak)
 * [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316572)
 * Hey PatMusic,
 * Ah okay. I see that 600px div. What about float:right on that div container, 
   then float:left on the <div>’s around the subscribe button and the email address
   field?
 * Here’s what I was thinking:
 *     ```
       .mc_form_inside{
       		float:right;
       	}
       	.mc_merge_var{
       		float:left;
       	}
       	.mc_signup_submit{
       		float:left;
       	}
       ```
   
 * Make sure that .mc_merge_var and .mc_signup_submit are not being set to float:
   right elsewhere.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘CSS problem within one-line form’ is closed to new replies.

 * ![](https://ps.w.org/mailchimp/assets/icon.svg?rev=3156997)
 * [Mailchimp List Subscribe Form](https://wordpress.org/plugins/mailchimp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mailchimp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mailchimp/)
 * [Active Topics](https://wordpress.org/support/plugin/mailchimp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mailchimp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mailchimp/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [mc_tak](https://wordpress.org/support/users/mc_tak/)
 * Last activity: [13 years, 5 months ago](https://wordpress.org/support/topic/css-problem-within-one-line-form/#post-3316572)
 * Status: not resolved