Jump to content
JoHubb

Images stacked instead of in a row.

Recommended Posts

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 by JoHubb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Perfect.  I missed that single </div> between the img child elements.

Reduced padding to 5%.

Thanks again, dsonesuk!

Edited by JoHubb

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...