EN
CSS - make div element to be not larger than its contents
1
answers
0
points
How can I make a div element to be not larger than its contents?
I would like the .parent element width be only as wide as the .child element.
My code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.parent {
background: orange;
}
.child {
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
<table class="child">
<tr>
<th>ID</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
</tr>
</table>
</div>
</body>
</html>
1 answer
0
points
This effect is called "shrinkwrapping" and there are couple of ways to achieve it (display:Â inline, float, min/max-width). All of the solutions have different side effects.
In your case, I would use display: inline-block to make .parent width equal to the .child element.
Quick solution:
.parent {
display: inline-block;
}
Â
Practical example
In this section we present full working, runnable example of using display: inline-block property in HTML5 web page template.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.parent {
background: orange;
display: inline-block; /* <----- required */
}
.child {
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
Parent element text...
<table class="child">
<tr>
<th>ID</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
</tr>
</table>
</div>
</body>
</html>
Â
References
0 comments
Add comment