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

30 Jul, 2020
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
<!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>
Output:
Output after changing the screen size:
Example 2: This example uses width: inherit property to display the content.
HTML
<!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>
Output:
Output after changing the screen size:
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.