Open In App

How to Set Div Width to Fit Content using CSS?

Last Updated : 29 Nov, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To set the width of a div to fit its content using CSS, there are multiple approaches you can use. This is useful when you want the container to automatically adjust its size based on the content inside, rather than setting a fixed width.

1. Using Default CSS Behavior

By default, a <div> in HTML adjusts its width to fit the content if no specific width is set and isn’t stretched by other styles. Block-level elements, however, usually take up the full width of their container unless changed.

HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <!--CSS Code-->
    <style media="screen">
        body {
            background: orange;
            overflow: hidden;
            color: white;
        }

        .GeeksForGeeks {
            text-align: center;
            background: dodgerblue;
            position: absolute;
            top: 50%;
            left: 1%;
            right: 1%;
        }
    </style>
</head>

<body>

    <!-- HTML Code -->
    <h1 style="color:forestgreen; top:35%;
            left: 35%; position:absolute; ">
        Geeks For Geeks
    </h1>

    <div class="GeeksForGeeks">
        Cascading Style Sheets, fondly referred
        to as CSS, is a simply designed language
        intended to simplify the process of
        making web pages presentable. CSS allows
        you to apply styles to web pages. More
        importantly, CSS enables you to do this
        independent of the HTML that makes up
        each web page.
    </div>
</body>

</html>


Explanation

  • The “.GeeksForGeeks” class styles the div with a blue background, centered text, and absolute positioning, making it appear in the middle of the screen and stretch across most of the page.
  • The <h1> heading is styled to appear in forest green and is positioned near the top center of the page, while the body’s background is set to orange, providing a contrasting color scheme.

Output

Set Div Width To Fit Content Using CSS

2. Using inline-block Property

The display: inline-block; property makes a <div> element behave like an inline element, taking only as much width as its content requires while still respecting block-level attributes like margins and padding.

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

<head>
    <!--CSS Code-->
    <style media="screen">
        body {
            background: violet;
            overflow: auto;
            color: white;
        }

        .GeeksForGeeks {
            text-align: center;
            background: dodgerblue;
            position: absolute;
            display: inline-block;
            left: 1%;
            right: 1%;
            top: 50%;
        }
    </style>
</head>

<body>
    <!-- HTML Code -->
    <h1 style="color: forestgreen; 
        top: 35%; left: 35%; position: absolute;">
        Geeks For Geeks
    </h1>

    <div class="GeeksForGeeks">
        Cascading Style Sheets, fondly referred
        to as CSS, is a simply designed language
        intended to simplify the process of
        making web pages presentable. CSS allows
        you to apply styles to web pages. More
        importantly, CSS enables you to do this
        independent of the HTML that makes up
        each web page.
    </div>
</body>

</html>

Explanation

  • The “.GeeksForGeeks” class styles the div with a blue background, centered text, and absolute positioning. It is displayed as an inline-block element and positioned in the middle of the screen, stretching across most of the page (from 1% left to 1% right).
  • The body is styled with a violet background and white text, while the <h1> heading appears in forest green near the top center. The heading is positioned absolutely to stand out against the background.

Output

Set Div Width To Fit Content Using CSS

3. Using fit-content Property

The fit-content property in CSS can be used with width and height to adjust the size of a <div> based on the size of its content. This property is particularly useful when you want the element to expand just enough to contain its content without exceeding a maximum width.

HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <!--CSS Code-->
    <style media="screen">
        body {
            background: tomato;
            overflow: hidden;
            color: white;
        }

        .GeeksForGeeks {
            background: crimson;
            position: absolute;
            width: fit-content;
            height: fit-content;
            left: 0;
            top: 50%;
        }
    </style>
</head>

<body>
    <!-- HTML Code -->
    <h1 style="color: lime; top: 35%;
        left: 35%; position: absolute;">
        Geeks For Geeks
    </h1>

    <div class="GeeksForGeeks">
        Cascading Style Sheets, fondly referred
        to as CSS, is a simply designed language
        intended to simplify the process of
        making web pages presentable. CSS allows
        you to apply styles to web pages. More
        importantly, CSS enables you to do this
        independent of the HTML that makes up
        each web page.
    </div>
</body>

</html>


Explanation

  • The “.GeeksForGeeks” class styles the div with a crimson background and positions it in the middle of the screen. Its width and height automatically adjust to fit the content.
  • The body has a tomato background with white text, while the <h1> heading is styled in lime and placed near the top center.

Output

Set Div Width To Fit Content Using CSS



Next Article

Similar Reads