Trouble moving a div-CodePudding

I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.

here is the code:

body {
  width: 100%;
  height: auto;
  background-image: url("../img/marble-background.gif");
  background-size: 100% 100vh;
}

img {
  border: 10px solid #E3C640;
}

.menuDiv {
  background-color: white;
  height: 850px;
  width: 300px;
  margin-top: 70px;
  border: 15px solid #E3C640;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 30px;
}

.bioDiv {
  background-color: white;
  height: 850px;
  width: 1200px;
  border: 15px solid #E3C640;
  position: relative;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Welcome to Cary McClures' Portfolio</title>
  <style type="text/css">
    @import url("bootstrap-5.1.3-dist/css/bootstrap.css");
  </style>
</head>

<head>

  <body>
    <img style="position: absolute; right: 600px; top: 68px
         " src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
    <div class="menuDiv">
      <h2 style="color: goldenrod"><a href="index.html">Home</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="bio.html">Biography</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="ed.html">Education</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="gd.html">Graphic Design</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="free.html">Freelance</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="baking.html">Baking</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="photo.html">Photo Gallery</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="resume.html">Resume</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="contact.html">Contacts</a></h2>
      <br>
      <h2 style="color: goldenrod"><a href="sitemap.html">Sitemap</a></h2>
    </div>
    <div class="bioDiv">
      <br>
      <h2 style="color: goldenrod">Biography</h2>
      <p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
      </p>
      <br>
      <p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
      </p>
      <br>
      <p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
      </p>
      <br>
      <p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
      </p>
      <br>
      <p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
      </p>
      <br>
      <p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
      </p>
      <br>
      <p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
        the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
      </p>
      <br>
    </div>
  </body>
</head>

</html>

CodePudding user response：

I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:

.container {
  display: flex;
}

<div class="container">
  <aside>
    <h1>Put your nav here</h1>
  </aside>
  <main>
    <img src="" height="200" width="300" />
    <div>
      <h1>Put Bio here</h1>
    </div>
  </main>
</div>

PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice

CodePudding user response：

In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate in your HTML. So, for the image you could have that fluid inside a column.

<div class="col-sm-12 col-md-10 mx-auto">
   <img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>

That's full width on medium screens and not quite full width on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.

Hopefully after that you can use exactly the same column set up for .bioDiv.

<div class="col-sm-12 col-md-10 mx-auto">
    <h2 style="color: goldenrod">Biography</h2>
    continued content here....
</div>

Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should hurt to set up menuDiv a similar way.