Menu
How can I hide the overflow of this image without removing it from the flow? If I made it a background image or positioned it absolutely, the text would flow right through it, and I don't want that. Applying overflow:hidden to the parent only expands the height of it to contain the whole image. What I want is:
https://jsfiddle.net/krishunt/e7mzo54c/
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: helvetica;
color: #333333;
}
section {
background-color: #E3E2DE;
padding: 20px 30px 30px 30px;
max-width: 1200px;
}
.pull-right {
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<section>
<img class="pull-right" src="http://thomasprintworks.com/temp/copier.png" />
<h2>Title of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id.</p>
</section>
</body>
887
asked Nov 26 '25 22:11
Add overflow:hidden to the <section>, this should work!
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
