I am doing a university exercise, I had to move my images to the top left and right of the page (which I did) and now my text is hidden underneath. My booklet states to just adjust where the top of the text should be. However, I don't know how to do that. Sorry my code is long: This is my attempt at doing it but it hasn't worked.
<!DOCTYPE html>
<html>
<head>
<style>
div.img-text {
vertical-align: top;
display: inline-block;
}
#imgleft {
position: absolute;
top: 0px;
left: 0px;
}
#imgright {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<meta charset="utf-8">
<title>Structuring HTML code is fun </title>
</head>
<body>
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.wikipedia.org">Ut ac tellus sit amet felis interdum sollicitudin et in ante.</a> Nam pellentesque, ante posuere consectetur pharetra, velit nibh consectetur felis, id consectetur
nisi nibh sit amet turpis. Etiam vitae commodo diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel urna dolor. Aenean vitae dolor feugiat erat convallis euismod. Duis blandit pretium blandit. Quisque
diam nisl, faucibus quis cursus nec, laoreet sit amet urna. In mollis semper risus a vehicula. Maecenas at neque massa, ac rutrum felis. Donec adipiscing eleifend turpis venenatis auctor. Phasellus consectetur nibh et urna tempus at molestie leo
sodales. Donec faucibus faucibus ultricies. Nunc at aliquet nunc.</p>
<ul>
<li>Vestibulum luctus diam non tellus euismod placerat. Quisque adipiscing euismod est, a imperdiet dolor ultricies et.</li>
<li>Fusce quis libero leo, non porta erat. Suspendisse tincidunt ligula metus, imperdiet congue tortor. Morbi venenatis aliquet elit ut tincidunt. Suspendisse mattis pharetra blandit.</li>
<li>Ut purus metus, mollis quis dapibus sed, pulvinar a nisl.</li>
<li>Etiam aliquam, leo gravida aliquam tristique, justo nulla mattis massa, ac vulputate purus erat ac ipsum. In vitae erat quis eros fermentum blandit. Etiam ut dui diam.</li>
<li>Aenean lobortis rhoncus pellentesque. Nunc euismod, sem vitae imperdiet dignissim, nunc nisl interdum ligula, vel congue erat dolor id lectus. Aenean mattis dui non metus vulputate dictum.</li>
</ul>
<h2> Absens haeres non erit </h2>
<p>Donec at nunc eget diam cursus tristique. Maecenas ut ligula eget sem interdum aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus id lorem id eros tristique feugiat at at quam. Cras sed mollis elit.
Sed volutpat, velit sed eleifend porttitor, diam lorem commodo eros, et iaculis nibh lorem in leo. Aliquam euismod faucibus ullamcorper. Proin tristique ante luctus sapien volutpat interdum. Mauris non risus et velit rhoncus ullamcorper eu nec quam.
Nullam ullamcorper, quam sed lobortis pellentesque, lorem lacus euismod augue, a sollicitudin sapien metus vitae nulla.</p>
</div>
<img src="https://via.placeholder.com/1280x720.jpg" alt="Omnia mutabant nihil interit" id="imgleft" />
<div >
<p>Etiam eget diam sed enim luctus molestie rutrum tincidunt sem. Fusce a faucibus lectus. Nam augue leo, dignissim at hendrerit blandit, fringilla at tortor. In auctor, tellus id facilisis commodo, tellus elit lobortis ipsum, vel ultrices dolor augue
vel risus. Vivamus id venenatis augue. Pellentesque pulvinar ornare massa ut mollis. Morbi fringilla consectetur vulputate. Sed sagittis condimentum mi at volutpat. Pellentesque fringilla porta nunc, quis egestas leo sodales non. Ut pulvinar, mauris
nec luctus consectetur, massa lorem blandit mauris, vitae porta arcu nibh eu metus. Aenean condimentum purus sodales felis blandit accumsan. Donec justo urna, congue non lobortis at, laoreet eu dui. Sed turpis ante, hendrerit cursus ultricies nec,
imperdiet nec est. Donec varius eleifend feugiat. Ut faucibus, est ac tincidunt fermentum, nulla est convrallis orci, non semper risus quam quis est.</p>
</div>
<img src="https://via.placeholder.com/1280x720.jpg" alt="Terra est stella" id="imgright" />
<div >
<h1> Qualis pagatio, talis laboratio </h1>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
</div>
<small>Copyright © 2012-2014 John Doe</small>
</body>
</html>CodePudding user response：
I'm not sure that if this is what you looking for but here it a working example at https://nexuscode.online/editor/yOkvdGZn7B
CodePudding user response：
<!DOCTYPE html>
<html>
<head>
<style>
div.img-text {
vertical-align: top;
display: inline-block;
}
#imgleft {
/* position: absolute; */
display: block;
top: 0px;
margin-left: 0px;
margin-right: auto;
}
#imgright {
/* position: absolute; */
display: block;
top: 0px;
margin-right: 0px;
margin-left: auto;
}
</style>
<meta charset="utf-8">
<title>Structuring HTML code is fun </title>
</head>
<body>
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://www.wikipedia.org">Ut ac tellus sit amet felis interdum sollicitudin et in ante.</a> Nam pellentesque, ante posuere consectetur pharetra, velit nibh consectetur felis, id consectetur
nisi nibh sit amet turpis. Etiam vitae commodo diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel urna dolor. Aenean vitae dolor feugiat erat convallis euismod. Duis blandit pretium blandit. Quisque
diam nisl, faucibus quis cursus nec, laoreet sit amet urna. In mollis semper risus a vehicula. Maecenas at neque massa, ac rutrum felis. Donec adipiscing eleifend turpis venenatis auctor. Phasellus consectetur nibh et urna tempus at molestie leo
sodales. Donec faucibus faucibus ultricies. Nunc at aliquet nunc.</p>
<ul>
<li>Vestibulum luctus diam non tellus euismod placerat. Quisque adipiscing euismod est, a imperdiet dolor ultricies et.</li>
<li>Fusce quis libero leo, non porta erat. Suspendisse tincidunt ligula metus, imperdiet congue tortor. Morbi venenatis aliquet elit ut tincidunt. Suspendisse mattis pharetra blandit.</li>
<li>Ut purus metus, mollis quis dapibus sed, pulvinar a nisl.</li>
<li>Etiam aliquam, leo gravida aliquam tristique, justo nulla mattis massa, ac vulputate purus erat ac ipsum. In vitae erat quis eros fermentum blandit. Etiam ut dui diam.</li>
<li>Aenean lobortis rhoncus pellentesque. Nunc euismod, sem vitae imperdiet dignissim, nunc nisl interdum ligula, vel congue erat dolor id lectus. Aenean mattis dui non metus vulputate dictum.</li>
</ul>
<h2> Absens haeres non erit </h2>
<p>Donec at nunc eget diam cursus tristique. Maecenas ut ligula eget sem interdum aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus id lorem id eros tristique feugiat at at quam. Cras sed mollis elit.
Sed volutpat, velit sed eleifend porttitor, diam lorem commodo eros, et iaculis nibh lorem in leo. Aliquam euismod faucibus ullamcorper. Proin tristique ante luctus sapien volutpat interdum. Mauris non risus et velit rhoncus ullamcorper eu nec quam.
Nullam ullamcorper, quam sed lobortis pellentesque, lorem lacus euismod augue, a sollicitudin sapien metus vitae nulla.</p>
</div>
<img src="https://via.placeholder.com/1280x720.jpg" alt="Omnia mutabant nihil interit" id="imgleft" />
<div >
<p>Etiam eget diam sed enim luctus molestie rutrum tincidunt sem. Fusce a faucibus lectus. Nam augue leo, dignissim at hendrerit blandit, fringilla at tortor. In auctor, tellus id facilisis commodo, tellus elit lobortis ipsum, vel ultrices dolor augue
vel risus. Vivamus id venenatis augue. Pellentesque pulvinar ornare massa ut mollis. Morbi fringilla consectetur vulputate. Sed sagittis condimentum mi at volutpat. Pellentesque fringilla porta nunc, quis egestas leo sodales non. Ut pulvinar, mauris
nec luctus consectetur, massa lorem blandit mauris, vitae porta arcu nibh eu metus. Aenean condimentum purus sodales felis blandit accumsan. Donec justo urna, congue non lobortis at, laoreet eu dui. Sed turpis ante, hendrerit cursus ultricies nec,
imperdiet nec est. Donec varius eleifend feugiat. Ut faucibus, est ac tincidunt fermentum, nulla est convrallis orci, non semper risus quam quis est.</p>
</div>
<img src="https://via.placeholder.com/1280x720.jpg" alt="Terra est stella" id="imgright" />
<div >
<h1> Qualis pagatio, talis laboratio </h1>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
<p>Duis a ipsum enim. Duis dictum viverra nulla non mattis. Proin sed erat tortor, ut condimentum dolor. Sed ultrices nulla vel eros sagittis id pharetra neque dictum. In hac habitasse platea dictumst. Pellentesque interdum, leo eu mollis sollicitudin,
ligula neque fringilla massa, eu vestibulum quam justo nec lacus. Cras faucibus libero eu nisl porttitor non volutpat quam elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend tempus
tellus, ut facilisis purus pulvinar ut.</p>
</div>
<small>Copyright © 2012-2014 John Doe</small>
</body>
</html>