html centering and sizing an image within a 2 column layout

Question

I am trying to make a 2 column layout with a brief description of the two people on the left columns and a picture of them on the right columns. I am struggling to both get a good sizing of the pictures and can't figure out how to center them within the column. I have provided the code below as well as a link. Any suggestions are appreciated. Thanks!

(https://nathanscottcreations.github.io/)

Relevant CSS:

    *           {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
                }

Relevant HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="VCGstyle.css">
    <style>
    html, body  {
                height: 100%;
                max-width:100%;
                margin: auto;
                }

    section     {
                max-width:80%;
                margin-left:auto;
                margin-right:auto;
                }
    .row        {
                display:flex;
                }

    .column     {
                flex: 50%;
                padding-left:3%;
                padding-right: 3%;
                }

    .columnpic  {
                flex: 50%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
                }
    <div style="height:500px;background-color:white;padding-top:1%;padding-bottom:1%;">
       <section style="max-width:80%;height:100%;margin-left:auto;margin-right:auto;background- 
        color:#F8F8F8;">
           <p style="font-size:50px;">About Us</p>
        <br><br>
    <div class="row">
      <div class="column">
        <h2>Evan Walker</h2>
            President & Chief Executive Officer, Baldiwn Wallace University '20
            <br><br><br><br><br><br><br>
      </div>
         <div class="columnpic" style="background-image: url(EvanHeadShot.jpg);background-repeat: no- 
         repeat;text-align:center;">
         </div>
    </div>

   <div class="row">
      <div class="column">
        <h2>Nathan Scott</h2>
            Executive Director, Baldwin Wallace Universtiy '20
            <br><br><br><br><br><br><br>
       </div>
         <div class="columnpic" style="background-image: url(linked2.jpg);background-repeat: no- 
         repeat;text-align:center;">
         </div>
     </div>
     </section>
    </div>

tamarin · Answer 1 · 2020-04-25T01:30:33.363

The main problem here is that your displaying the images using background-image instead of the img attribute. See here for a guide on how to use both of them.

I did a snippet with your code and cleaned it a bit. I removed all the inline styles and useless rules to make it simpler and clearer. Uncomment the background properties if you want to see the boundaries of the different elements.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  background: white;
}

section {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  /* background: lightgreen; */
}

.about-title{
  font-size: 50px;
  margin-bottom: 2rem;
}

.row {
  display: flex;
  padding: 1rem;
  /* background: lightcoral; */
}

.column {
  width: 50%;
  padding-left: 3%;
  padding-right: 3%;
  /* background: lemonchiffon; */
}

.columnpic { 
  width: 50%;
  text-align: center;
  /* background: lightblue; */
}

.pic { 
  width: 100%;
  max-width: 200px;
}

<div>
  <section>
    <h1 class="about-title">About Us</h1>
    <div class="row">
      <div class="column">
        <h2>Evan Walker</h2>
        President & Chief Executive Officer, Baldiwn Wallace University '20
      </div>
      <div class="columnpic">
        <img class="pic" alt="Profile picture" src="https://nathanscottcreations.github.io/linked2.jpg" />
      </div>
    </div>

    <div class="row">
      <div class="column">
        <h2>Nathan Scott</h2>
        Executive Director, Baldwin Wallace Universtiy '20
      </div>
      <div class="columnpic">
        <img class="pic" alt="Profile picture" src="https://nathanscottcreations.github.io/linked2.jpg" />
      </div>
    </div>
  </section>
</div>

Thank you so much for the response. After tweaking with the widths and heights of the photos, I got them to fit perfectly! I appreciate it. — Nathan'sCreations97, Apr 25 '20 at 20:37

score 0 · Answer 2 · answered Apr 25 '20 at 00:18

Try using CSS grid for 2 dimensional layouts. Your trying to center an image in flex which is really built for 1 dimensional layouts.

In CSS grid, creating the columns is as simple as {grid-template-column, align-items and justify-items}.

Not sure how much you know about CSS you know but the basics are really straightforward.

html centering and sizing an image within a 2 column layout

2 Answers2