Whenever I need to display a list of items with differently sized images on the left and corresponding text on the right, I always face this challenge:
Click here for image link
For many years, my go-to solution has been using HTML tables like this:
<html>
<style>
* { margin: 0; padding: 0 }
body {
padding: 20px;
}
#content {
width: 600px;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: green;
}
.item {
margin: 0 0 20px 0;
}
.itemIcon {
float:left;
}
.itemBody {
float:right;
}
.clear {
clear: both;
}
</style>
<body>
<div id="content">
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>Item Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac mollis mauris.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="largeIcon.png" alt=""/>
</div>
<div class="itemBody">
<h1>Another Item</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>One More Item</h1>
<p>Sed pharetra vehicula posuere. Ut rutrum libero in arcu tincidunt bibendum.</p>
</div>
<br class="clear"/>
</div>
</div>
</body>
</html>
Despite several attempts, whenever I try to switch to floating divs, it always resulted in failure. Here's my latest attempt:
Check out my failed attempt
What modifications do I need to make to this code to ensure that the floating div layout resembles the original table structure?