Jump to content

Images stacked instead of in a row.


JoHubb

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
Link to comment
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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...