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: