How to make a div not larger than its contents?

Question

How to make a div not larger than its contents?

I have a layout similar to:



<div>

    <table>

    </table>

</div>

I would like for the div to only expand to as wide as my table becomes.

css html

3 years ago by akshay1995

2 Answers

Login / Signup to Answer the Question.

Login Signup

**Bharatgxwzm** · Answer 1 · 2021-04-23T12:29:14

display: inline-block joins an additional edge to your element.

I recommend this:

#element {

    display: table; / IE8+ and all other modern browsers /

}

You can additionally now quickly focus that fancy new #element just by adding margin: 0 auto.

**MounikaDasa** · Answer 2 · 2021-04-30T12:19:38

We can make it using fit-content property in width and height:
In this following method we set the width and height property to fit-content value.

<!DOCTYPE html>
<html lang = "en" dir = "ltr">
<head>
<meta charset = "utf-8">
<title>Studytonight Example</title>

<style media = "screen">
Studytonight{

width:fit-content;
height:fit-content;
left: 0;
top: 50%;
}
</style>
</head>

<body>

<center><h1>Studytonight</h1></center>
<center>
<div class = "Studytoniht">
css language
</div>
</center>
</body>
</html>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

How to make a div not larger than its contents?

2 Answers

Login / Signup to Answer the Question.