CODEWITHSUNDEEP
htmlcss
Rameez
Rameez

Reputation: 601

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

Here i want to use two buttons which cover the entire screen width and the buttons should have equal width. And alo there should not be any space between these buttons.

I tried with the following HTML and CSS codes but i didn't get what i 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 the code here here the buttons not covering the entire screen size also a small gap is there between these two buttons. How to tackle this issue? Thank you..

Upvotes: 3

Views: 16699

Answers (6)

Abhitalks
Abhitalks

Reputation: 28387

Demo: http://jsfiddle.net/abhitalks/XkhwQ/7/

Q1: buttons not covering the entire screen size

The reason(s) are:

  1. The box-model. By default the widths are calculated exclusive of paddings. In order to be safe, you should first set the box-sizing: border-box and reset the paddings and margins.
  2. The container is 100% of what? Better, set the width on parent i.e. body.

You can mitigate this 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 the children equal */
}

.

Q2: also a small gap is there between these two buttons

The reason is:

The buttons are intrinsically inline elements and this means the white-space counts.

You can mitigate this in two ways:

  1. Comment out the white-space.
  2. Set the 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 and illustrates both issues.

.

Upvotes: 6

Aniket
Aniket

Reputation: 8

Try This 

<style>
    .container {
        width: 100%;
    }

    #button1,
    #button2 {
        float: left;
        width: 50%;
    background:#dbdbdb;
    }
    </style>


    </head>

    <body>
    <div class="container">

    <div id="button1">First Button Text</div>
    <div id="button2">Second Button Text</div>

    </div>


    </body>

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

Use this HTML

<div id="container">
    <div class="btn-box"><button id="button1">Button1</button></div>
    <div class="btn-box"><button id="button2">Button2</button></div>
    <div style="clear:both;"></div>
</div>

& CSS

#container{width:100%} 
.btn-box{display:block; width:50%; float:left;}
.btn-box button{display:block; width:100%;}

Upvotes: 2

trboslav
trboslav

Reputation: 71

Both of your buttons should have a width of 50% and be floated to the left or right

#button1, #button2
{
    width:50%;
    float:left;
}

Upvotes: 3

Justinas
Justinas

Reputation: 43479

Apply float to buttons and make them 50% width:

.container {
    width: 100%;
}

#button1,
#button2 {
    float: left;
    width: 50%;
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

I think there is a typo on button2 class.

#button2
{
width:50%;
}

Upvotes: 0

Related Questions