Margin being added on h2

I am trying to create a div that has a button on the left, right and then a header in between. Something that looks like this:

enter image description here

But I'm getting something like this:

enter image description here

You can see that there is a margin being added and I can't figure out why. I have inspected everything I can, and I can't figure out what I'm doing wrong. (I understand that the h2 is at 50%. I did this to try and figure out why the right button was being pushed down.)

Here is my HTML:

    <div class="day_buttons">
            <button id="previous_day"></button>
            <h2 id="zip_h2">What day and time would you like your stuff picked up?</h2>
            <button id="next_day"></button>
    </div><!--end nav_buttons--> 

Here is the CSS to go with it:

#next_day
{
    float: right;
    background: transparent url(./images/icons/forward_button.gif) no-repeat top left;
    width:4em;
    height:4em;
    z-index:5;

}

#previous_day
{
    position:relative;
    top:0;
    left:0;
    float: left;
    background: transparent url(./images/icons/backward_button.gif) no-repeat top left;
    width:4em;
    height:4em;
    z-index:5;
}
.day_buttons
{
    height:3em;
    width:100%;
    display:inline-block;
}

#zip_h2
{
    width: 50%;
    margin:0px !important;
    overflow:hidden;
}

Here is a Fiddle for those who need it: http://jsfiddle.net/tK72Z/

Solutions

Changes in the CSS :

For the right button

#next_day
{
position: absolute;
float: right;
top: 10px;
right: 10px;
background: transparent url(right.jpg) no-repeat top left;
width:4em;
height:4em;
z-index:5;  
}   

For the heading

#zip_h2
{
margin:0px !important;
padding-left: 20px;
padding-right: 70px;
text-align: center;
overflow:hidden;
}

H2 elements are block-level so it will always try to fill 100% of the width on the "line" unless you tell it not to.

Just add float:left to your h2 styling and you should be good.

Just a small Change

top: 0;
right: 0;

Working Fiddle

Tags: Html / Css / Wordpress

Similar questions

[Plugin: WordPress.com Stats] Javascript not being added to footer
If you view the source code on my website, loneplacebo.com, you'll notice that only the comment is shown above the . The plugin doesn't seem to be adding the necessary javascript code to track my site's traffic. I tried deactivating and reactivating the plugin to no avail.
Prevent duplicate pages from being added
Im using this code to prevent duplicate post from being added but i also need to prevent duplicate pages too. Can Someone please help?
Cause of Blank Lines Being Added to WP FIles?
Does anyone know why some of my websites add a blank line after every line of code, while others on the same host and server leave the files untouched? A few details that might help: NOTE: I can provide additional config info, I wasn't sure which details if any would be helpful. I can download the file via FTP and the additional lines are present, ...
Stop 'alt' from being added to the_post_thumbnail
I'm using the_post_thumbnail to display a specific thumbnail size. The function outputs an 'alt=' tag with the description of the attachment. Is it possible to clear the value in the ouput? So it'll display alt=""?
Wordpress stylesheet isn't being added
I have recently started to learn WordPress and after learning how to use it at basic level I immediately started to learn how to develop templates since this is what interested me from the start when I started to learn it. I am reading WordPress 3 Complete and at Chapter 6 the book guides you to develop your first basic theme. The only problem is t...
How to restrict specific post types from being read or added by specific user roles (eg. author)?
I'm not very clear how to restrict admin area post types access to specific user roles. In my case, I have some post type such as "suppliers" which I do not want to show to "authors". By default WP allows authors to browse, add or edit their own content. But I don't want my authors to add a "supplier" or browse entries from other admins. I've looke...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.