I have a square div (called “square”) and trying to put another div (“caption”) inside the “square”. But the caption goes outside the square boundaries! How to cut its size to the exact boundaries of the parent div?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
a {
text-decoration: none;
color: #FFFFFF;
}
div.square {
background-color: #1BA1E2;
display: inline-block;
width: 44px;
height: 44px;
margin: 0 6px 0 9px;
}
div.caption {
display: inline-block;
margin: 15px 0 0 3px;
padding: 0;
color: #FFFFFF;
font-size: 24px;
}
span.description {
display: inline-block;
vertical-align: bottom;
font-size: 18px;
}
</style>
</head>
<body>
<p>
<a href="page">
<div class="square">
<div class="caption">
Caption
</div>
</div>
<span class="description">
Description
</span>
</a>
</p>
</body>
</html>
In this case, Caption should be cut to Cap+ 1/2t inside the blue box (something like WP7 style). And a description alongside.
Put
overflow:hiddenin the styles fordiv.square. This will cause the caption to cut off at the boundaries of the box.Running example