CODEWITHSUNDEEP
htmlcsslayout
sprocket12
sprocket12

Reputation: 5488

Center and Resize Buttons

enter image description here

#controlpanel .button 
{

    margin: 12px 12px 0px 12px;
     width: 100%;
}

How do I make these buttons fill the width of the white box, and yet have 12px on each side? Padding adds space internally... and margin makes them go off the white box.

Upvotes: 0

Views: 101

Answers (3)

CairoCoder
CairoCoder

Reputation: 3189

Two things may help:

  • use padding for div#controlpanel
  • remove the margin for buttons

In addition you could also try to remove the 100% width.

Upvotes: 0

jaco
jaco

Reputation: 3516

The problem is the width: 100%;. Try to comment out that line and type: display: block;

Upvotes: 0

Alfa3eta
Alfa3eta

Reputation: 405

  1. add padding to #controlpanel
  2. remove left and right margins from button

  3. add box-sizing:border-box to buttons and you should get smth like:

    #controlpanel{     
    padding:0px 12px 12px 12px;
}


#controlpanel .button {
    margin: 12px 0px 0px 0px;
    width: 100%;
    box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

Upvotes: 1

Related Questions