JoHubb 0 Report post Posted September 25, 2018 (edited) I have two images of different heights to be placed in a row between lines of text. Zoe C2 is a taller file by about 50% than Congo.jpg. This coding sets the pictures one on top of the other. I'd be grateful for advice. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> * { box-sizing: border-box; } .column { float: left; width: 50%; padding: 20px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>Four Foolish Maidens</h2> <p> These four were absolutely stupid. They forgot to bring oil for their lamps.</p> <div class="row"> <div class="column"> <img src="file:///home/howard/Pictures/Congo.jpg" alt="Congo" style="width:10%"> <div class="column"> <img src="file:///home/howard/Pictures/Zoe%20C2.png" alt="Zoe C2" style="width:100%"> </div> </div> </body> </html> Edited September 25, 2018 by JoHubb Quote Share this post Link to post Share on other sites
dsonesuk 873 Report post Posted September 25, 2018 For every opening div tags '<div>' they must be a equal number of closing div tags '</div>', styling this element that includes '<div>....</div> and everything within it, means it will follow the CSS styling applied to it and child elements. Without a closing div, it will attempt to interpret what is wanted, but will usually get it wrong! Also width: 50% with padding 20px means it will be 50% + 40px width, meaning two floated div's will be to wide to fit in a single row. Quote Share this post Link to post Share on other sites
JoHubb 0 Report post Posted September 25, 2018 (edited) Perfect. I missed that single </div> between the img child elements. Reduced padding to 5%. Thanks again, dsonesuk! Edited September 25, 2018 by JoHubb Quote Share this post Link to post Share on other sites
