Solution 1 :

You can use the css flex property like, put the image and text inside a div and add use display:flex property to the div and then you can use can use the order property if you want image and text in different order.

Solution 2 :

You can do that by putting your <img> and your <p> tag together inside one div and by using display:flex on that div element.

Solution 3 :

Place the p tag before the img and do as follows:


<header id="portrait">
   <p>this is where the text wold be going</p>
   <img src="../images/portrait.jpg" alt="portrait" class="portrait">


#portraid {

Problem :

This is what I have so far for the code…

<!DOCTYPE html>
<html lang="en">
  <!--meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Stylesheets -->
  <link href="style.css" rel="stylesheet" type="text/css">

  <title>name of website</title>
         <div class="topnav">
         <img src="../images/website logo-01.png" width="80" height="80" alt="logo" class="logo">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">About</a></li>
                      <li><a href="work.html">Work</a></li>
                      <li><a href="contact.html">Contact</a></li>
                     <li> <a href="target="_blank">Resume</a>

<header id="portrait">
  <img src="../images/portrait.jpg" width="2000" height="2000" alt="portrait" class="portrait"
  style="float: left; margin-right: -8000px; margin-bottom:">

  <p>this is where the text wold be going</p>




enter image description here

I would like the text to be aligned where the yellow bordered box is, and would appreciate some help.


Comment posted by am2505

It would be better if you could please share CSS file too or use jsFiddle.


Leave a Reply

Your email address will not be published. Required fields are marked *