• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[CSS][how-to]Center two input buttons inside a div.

Question

venetus    0

Hello!

I'm trying to center two buttons inside a div, and I can't achieve in Firefox and Chrome, In explorer it's working fine.

This is my HTML code:

<div id="wrap">
      <div id="buttons">
                    <input type="submit" name="submitButtonName"/>
                    <input type="reset">
      </div>
</div>

And my CSS is:


div#wrap{
    width:1160px;
}

div#buttons{
    clear: both;
    text-align: center;
    width: 100%;
    border: solid 1px yellow;
    margin-left: auto;
    margin-right: auto;
}

I want the leyout to look like the image I attach to the post!

http://img826.imageshack.us/i/exampler.jpg/

exampler.jpg

And a second question, how can I do to make my buttons to be side by side.

Thanks lot!

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Cupcakes    151

Why are you using clear: both; on a div that isn't being floated?

      <div id="buttons" class="clearfix">
                    <input type="submit" name="submitButtonName" id="ex1" />
                    <input type="reset" id="ex2">
      </div>

 #ex1 {
   float: left;
  }
 #ex2 {
  float: right;
 }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

Share this post


Link to post
Share on other sites
  • 0
venetus    0

Why are you using clear: both; on a div that isn't being floated?

      <div id="buttons" class="clearfix">
                    <input type="submit" name="submitButtonName" id="ex1" />
                    <input type="reset" id="ex2">
      </div>

 #ex1 {
   float: left;
  }
 #ex2 {
  float: right;
 }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

Thanks a lot!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.