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

Last Updated : 30 Jul, 2024

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expand Div Width with Content</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
        }

        h1 {
            color: #35cc27;
            margin-bottom: 20px;
        }

        h3 {
            color: #6ba832;
            margin-bottom: 30px;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            max-width: 80%;
        }

        .box {
            background-color: #35cc27;
            color: white;
            padding: 20px;
            border-radius: 10px;
            flex: 1 1 auto;
            max-width: 300px;
        }

        .box.geek2 {
            background-color: #6ba832;
        }

        .box.geek3 {
            background-color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to make div width expand with its content using CSS?</h3>

    <div class="container">
        <div class="box 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="box 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="box 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>
    </div>
</body>

</html>

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expand Div Width with Content</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
        }

        h1 {
            color: #35cc27;
            margin-bottom: 20px;
        }

        h3 {
            color: #6ba832;
            margin-bottom: 30px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            max-width: 80%;
        }

        .box {
            background-color: #35cc27;
            color: white;
            padding: 20px;
            border-radius: 10px;
            flex: 1 1 auto;
            width: 100%;
            max-width: 600px;
        }

        .box.geek2 {
            background-color: green;
        }

        .box.geek3 {
            background-color: #28cc23;
        }

        .box.geek1 {
            background-color: #6ba832;
        }

        @media (min-width: 600px) {
            .box.geek3,
            .box.geek1 {
                width: auto;
                max-width: none;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>How to make div width expand with its content using CSS?</h3>

    <div class="container">
        <div class="box geek2">
            <p>
                Javascript is the most common programming language used in many startups and large enterprises for software development.
            </p>
            <div class="box 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="box 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>
    </div>
</body>

</html>

Output:

How to make div not larger than its contents using CSS?

SHUBHAMSINGH10

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?