JoHubb Posted September 25, 2018 Share 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share 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. Link to comment Share on other sites More sharing options...
JoHubb Posted September 25, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now