• 0

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


Question

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!

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 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;
    }

Link to comment
Share on other sites

  • 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!

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.