css - How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size -

here want use 2 buttons cover entire screen width , buttons should have equal width. , alo there should not space between these buttons.

i tried following html , css codes didn't expect;

css

#container {     width:100% }          #button1 {     width:50%; } #button2 {     width:50% 100%; } 

html

<div id="container">   <button id="button1">button1</button>   <button id="button2">button2</button> </div> 

i tried code here here buttons not covering entire screen size small gap there between these 2 buttons. how tackle issue? thank you..

demo: http://jsfiddle.net/abhitalks/xkhwq/7/

q1: buttons not covering entire screen size

the reason(s) are:

1. the box-model. default widths calculated exclusive of paddings. in order safe, should first set box-sizing: border-box , reset paddings , margins.
2. the container 100% of what? better, set width on parent i.e. body.

you can mitigate by:

* {     margin: 0; padding: 0; box-sizing: border-box; /* reset */ } html, body {     width: 100%; /* specify width on parent */ } .container {     width: 100% } button {     width: 50%; /* make children equal */ } 

.

q2: small gap there between these 2 buttons

the reason is:

the buttons intrinsically inline elements , means white-space counts.

you can mitigate in 2 ways:

1. comment out white-space.
2. set float on buttons.

example 1 (using comments):

<div class="container">     <button>button1</button><!--     --><button>button2</button> </div> 

example 2 (using floats):

.container > button {     float: left; } 

the demo (http://jsfiddle.net/abhitalks/xkhwq/7/) covers , illustrates both issues.

.