Advertisements
How to Make a DIV Not Larger than its Contents using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS display Property
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
The display: inline-block; force an element to generate a block box that's laid out as if it were an inline box. Let's try out the following example to see how this works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Expand DIV as Wide as its Contents using CSS</title>
<style>
.wrapper{
display: inline-block;
border: 25px solid black;
margin: 20px;
}
img{
border: 20px solid white;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="images/sky.jpg" width="300" alt="Cloudy Sky">
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to remove white space underneath an image using CSS
- How to create two DIV elements with same height side by side in CSS
- How to transform image size on mouse hover without affecting the layout in CSS
Advertisements
