venetus Posted January 15, 2011 Share Posted January 15, 2011 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/ 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 More sharing options...
0 Cupcakes Posted January 15, 2011 Share Posted January 15, 2011 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 More sharing options...
0 venetus Posted January 16, 2011 Author Share Posted January 16, 2011 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 More sharing options...
Question
venetus
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/
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