Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>CSS Question</title>
- <style type="text/css">
- .mystery,
- .mystery *
- {
- padding: 0;
- border: 0;
- margin: 0;
- }
- .button-container
- {
- background-color: #f77;
- padding: 1rem;
- margin: 1rem;
- }
- .button
- {
- float: left;
- font-family: 'Courier', monospace;
- width: 3.1rem;
- height: 2rem;
- border: solid black 2px;
- margin-right: 0.7rem;
- }
- .button-wider-1
- {
- /*
- The following 'calc' expression adds up:
- * the standard width of a button (i.e. the width
- of an element with class "button");
- * the width of a button's border;
- * the horizontal margin (i.e. the value of margin-right for a
- button);
- * the width of a button's border;
- */
- width: calc(
- 3.1rem +
- 2px +
- 0.7rem +
- 2px
- );
- }
- .button-wider-2
- {
- /*
- The following 'calc' expression is the same as the previous,
- except that there is an extra term at the end, the standard width
- of a button.
- */
- width: calc(
- 3.1rem +
- 2px +
- 0.7rem +
- 2px +
- 3.1rem
- );
- }
- </style>
- </head>
- <body>
- <div class="mystery">
- <div class="button-container">
- <button type="button" class="button">x</button>
- <button type="button" class="button">x</button>
- <div style="clear: both"></div>
- <button type="button" class="button button-wider-1">y</button>
- <div style="clear: both"></div>
- </div>
- <div class="button-container">
- <button type="button" class="button">x</button>
- <button type="button" class="button">x</button>
- <div style="clear: both"></div>
- <button type="button" class="button button-wider-2">y</button>
- <div style="clear: both"></div>
- </div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment