Question from a beginner: I'm attempting to position a photo on the right side of a webpage, with text wrapping around it on the left, and the photographer credit directly under the photo.
The issue is that the credit is appearing on the left side above the text header rather than below the photo on the right.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<link rel='stylesheet' href='test.css'/>
</head>
<body>
<picture>
<img class='pic' src='images\str_pic1.JPG' alt="Person in blue shirt" />
<figcaption class='pic'>Photo Credit: Photographer</figcaption>
</picture>
<div>
<h2>Title</h2>
<p>Text body here, lorem ipsum etc.</p>
</div>
</body>
</html>
This is my CSS code:
.page {
font-size: 100%;
background-color: #777;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pic {
width: 35%;
float: right;
margin-left: 20px;
}
I attempted enclosing the pic and credit in a div container and using the following in the CSS:
.pic-box {
display: flex;
flex-direction: column;
}
Unfortunately, this solution did not work as expected.
This is my first time asking a question here, feedback on how I can improve is appreciated!