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


Tags: html,css

Problem :

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..



Solution :

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.

.


    CSS Howto..

    how to draw a shape by using canvas or css? [closed]

    How to animate a progress bar in Bootstrap 4?

    How to center an image in an img tag using CSS background position

    CSS how to height step arrow

    How to set outline without using CSS outline property?

    How to control the css for two instance of Google Maps autocomplete on the same page?

    css: how to display prev and next links outside slider

    How to make partial scrolling div?

    How to write css for a color when you only know the color in the RGB format [duplicate]

    How can I center-align text with uneven icons either side?

    How to apply CSS to elements that have multiple classes?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    joomla, CSS - show joomla module only for smartphone screens

    how to change color of selected menu in css or jquery [closed]

    How do I align my navigation to the right without removing (display: inline;)?

    How do I avoid gap when using z-index in CSS?

    Parallax image shows at top of page on load

    How to scroll a div inside another div?

    How do I apply properties to a previous sibling on hover?

    how to achieve following using css ( digits input )

    How to always make page content appear beneath navigation bar?

    How to markup an obscure data table layout for screen readers?

    How to set a image/icon width that was specified through css content property?

    How to use “currentColor” CSS 3 keyword in LESS?

    Javascript/CSS- how to change the colour of a textarea scrollbar without a third party JS library?

    Table borders not showing correctly

    how to create a vertical menu in html/css [closed]

    How to go about containing a float within a div with variable space

    How to set height for elements in a

    CSS: how to share remaining vertical space evenly?