How to make div width expand with its content using CSS ?

Given an HTML document and the task is to make div width expand with its content using CSS. To do this, the width property is used to set the width of an element excluding padding, margin and border of element. The width property values are listed below:

Syntax:

width: length|percentage|auto|initial|inherit;

Property Values:

  • width: auto; It is used to set width property to its default value. If the width property set to auto then the browser calculates the width of element.
  • width: length; It is used to set the width of element in form of px, cm etc. The length can not be negative.
  • width: initial; It is used to set width property to its default value.
  • width: inherit; It is used to set width property from its parent element.

Example 1: This example use width: auto; property to display the content.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make div width expand 
        with its content using CSS ?
    </title>
  
    <style>
        .geek2 {
            background-color: #6ba832;
            height: 120px;
            width: 49%;
            float: left;
            color: white;
        }
  
        .geek3 {
            background-color: green;
            height: 7.5em;
            width: 49%;
            float: right;
            color: white;
        }
  
        h1 {
            color: Green;
        }
  
        .geek1 {
            background-color: #35cc27;
            width: auto;
            color: white;
            float: right;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h3>
            How to make div width expand 
            with its content using CSS ?
        </h3>
  
        <div class="geek2">
            <p>
                Javascript is the most common 
                programming language used in 
                many startups and large enterprises 
                for software development. It is 
                used as a client-side development 
                tool in 95% of the websites. 
            </p>
        </div>
  
        <div class="geek3">
            <p>Python is a dynamic, high level, 
                open-source programming language. 
                It is relatively a newer language
                in the world of programming 
                languages and in AWS environment 
                as well. This is the simplest 
                language and beginners friendly. 
            </p>
        </div>
  
        <div class="geek1">
            <p>Java is an object-oriented language 
                with fewer dependencies. It is a 
                secure and dynamic language 
                designed to have high performance.
                Java is one of the earliest languages
                used in business-critical ideas. 
            </p>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:




Output after changing the screen size:

Example 2: This example uses width: inherit property to display the content.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make div width expand 
        with its content using CSS ?
    </title>
  
    <style>
        .geek2 {
            width: auto;
            background-color: green;
            width: 75%;
        }
  
        .geek3 {
            width: inherit;
            background-color: #28cc23;
            color: white;
        }
  
        .geek1 {
            width: 25%;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
  
        <h1>GeeksforGeeks</h1>
  
        <h3>
            How to make div width expand 
            with its content using CSS ?
        </h3>
  
        <div class="geek2">
            <p>
                Javascript is the most common 
                programming language used in 
                many startups and large 
                enterprises for software 
                development.
            </p>
  
  
            <div class="geek3">
                <p>
                    Python is a dynamic, high 
                    level, open-source programming
                    language. It is relatively a 
                    newer language in the world
                    of programming languages and 
                    in AWS environment as well.
                </p>
            </div>
  
            <div class="geek1">
                <p>
                    Java is an object-oriented 
                    language with fewer dependencies. 
                    It is a secure and dynamic
                    language designed to have high 
                    performance.
                </p>
            </div>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:


Output after changing the screen size:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.