How to make div not larger than its contents using CSS?
Given a div and the task is to set div not larger then its content. If the size of content change then the size of div also change.
Method 1: Use display: inline-block property to set a div size according to its content.
Example:
<!DOCTYPE html> <html> <head> <style> .geeks { background-color: green; color:white; display: inline-block; } </style> </head> <body> <div class = "geeks"> Welcome to GeeksforGeeks! </div> </body> </html> |
chevron_right
filter_none
Output:
Method 2: This method set the width and height property to fit-content value.
<!DOCTYPE html> <html> <head> <style> .geeks { background-color: green; color:white; width:fit-content; height:fit-content; } </style> </head> <body> <div class = "geeks"> Welcome to GeeksforGeeks! </div> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- Java program to merge contents of all the files in a directory
- How to recursively delete a directory and its entire contents (files + sub dirs) in PHP?
- Copy the entire contents of a directory to another directory in PHP
- How to make a redirect in PHP?
- How to make a spider-bot in PHP ?
- Do you want to make your own games?
- How to make CSS Loader ?
- How to make a placeholder for a 'select' box?
- How to make a div stick to the top of the screen ?
- Which language should you learn first if you want to make an app?
- How to make a Pagination using HTML and CSS ?
- How to make elements float to center?
- How to make dynamic chart in PHP using canvasJS?
- How to make text input non-editable using CSS?
- How to make a key fire when key is pressed using JavaScript ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
