HTML CSS Exercise - Let padding and border not affect available width and height
HTML CSS Exercise - 25
In this exercise you will In this exercise you will Let padding and border not affect available width and height. You will end up with a display like following image.

Use the following editor to complete the exercise.
See the solution in the browser
See the Pen html css common editor by w3resource (@w3resource) on CodePen.
Previous: Set count and insert it before elements.
Next: Create linear, radial, repeating linear and repeating radial gradients with CSS3
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
Stacking Divs from Bottom to Top
If you only need this to work for modern browsers and IE 8+ you can use table positioning, vertical-align:bottom and max-height.
CSS Code:
.wrapper { display: table-cell; vertical-align: bottom; height: 200px; } .content { max-height: 200px; overflow: auto; }
HTML Code:
<div class="wrapper"> <div class="content"> <div>row 1</div> <div>row 2</div> <div>row 3</div> </div> </div>
You can make elements stick to the bottom of their container with position:absolute, but it'll take them out of the flow. As a result they won't stretch and make the container to be scrollable.
.wrapper { position: relative; height: 200px; } .content { position: absolute; bottom: 0; width: 100%; }
Ref: https://bit.ly/3pQttyU
- Weekly Trends
- Python Interview Questions and Answers: Comprehensive Guide
- Scala Exercises, Practice, Solution
- Kotlin Exercises practice with solution
- MongoDB Exercises, Practice, Solution
- SQL Exercises, Practice, Solution - JOINS
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook