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

Last Updated : 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> 