Is there a way to align elements to the left and right within a <div> container?

Question

Is there a way to align elements to the left and right within a <div> container?

Having trouble styling my website at . I can't seem to get the images to align with names underneath and bios on the right. My VS Code keeps flagging Float properties as errors, and I need some CSS help from someone more experienced.

function condenseLinks() {
  var x = document.getElementById("links");
  if (x.className === "vidlinks") {
    x.className += " responsive";
  } else {
    x.className = "vidlinks";
  }
}

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

<!-- More CSS code goes here -->

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>

<body>
  <div class='content'>
    <!-- Main content of the website -->
  </div>
</body>

</html>

javascript html css responsive

Answer 1

Answer №1

Placing the image and name within a parent div with a display of flex, while also removing unnecessary
tags should fix the issue at hand.

<div class="container">
    <div class="bioPhotos">
        <img src="evolvephoto1.png"> 
        <div class="about-details">
             NAME: Kevin Kapoor <br>
             IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
             Twitch: @irohsTeaShop <br>
        </div>
    </div>
    <p>
        With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
    </p>
</div>

.container{
    display: flex;
    width: 50%;
}
.bioPhotos{
    display: flex;
    flex-direction: column;
}
.about-details{
    display: flex;
}
p{
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 2

Placing the image and name within a parent div with a display of flex, while also removing unnecessary
tags should fix the issue at hand.

<div class="container">
    <div class="bioPhotos">
        <img src="evolvephoto1.png"> 
        <div class="about-details">
             NAME: Kevin Kapoor <br>
             IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
             Twitch: @irohsTeaShop <br>
        </div>
    </div>
    <p>
        With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
    </p>
</div>

.container{
    display: flex;
    width: 50%;
}
.bioPhotos{
    display: flex;
    flex-direction: column;
}
.about-details{
    display: flex;
}
p{
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 3

Answer №2

Modify this section:

<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
      <div class="columnOne">
         <div class="bioPhotos" style="width:300px; height:300px;min-width: 250px;min-height: 250px;">
            <img src="evolvingphoto2.png" style="width:80%; height:80%;">
         </div>
         <div class="about-details">
            NAME: Jessica Johnson <br>
            Username: JessJ <br>
            Instagram: @jessjphotography <br>
         </div>
       </div>
       <p style="padding: 25px;">
          With creativity in her soul and passion in her veins, Jessica is a talented artist with a diverse range of skills. From capturing breathtaking landscapes to beautifully photographing intimate moments, she has an eye for detail and a knack for bringing out the best in every subject. As a photography mentor, she can help individuals master the art of visual storytelling or assist businesses in creating captivating marketing material. No matter your artistic aspirations, she will guide you towards realizing your creative potential and achieving success in the world of photography.
       </p>
    </div>

Answer 4

Modify this section:

<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
      <div class="columnOne">
         <div class="bioPhotos" style="width:300px; height:300px;min-width: 250px;min-height: 250px;">
            <img src="evolvingphoto2.png" style="width:80%; height:80%;">
         </div>
         <div class="about-details">
            NAME: Jessica Johnson <br>
            Username: JessJ <br>
            Instagram: @jessjphotography <br>
         </div>
       </div>
       <p style="padding: 25px;">
          With creativity in her soul and passion in her veins, Jessica is a talented artist with a diverse range of skills. From capturing breathtaking landscapes to beautifully photographing intimate moments, she has an eye for detail and a knack for bringing out the best in every subject. As a photography mentor, she can help individuals master the art of visual storytelling or assist businesses in creating captivating marketing material. No matter your artistic aspirations, she will guide you towards realizing your creative potential and achieving success in the world of photography.
       </p>
    </div>

Is there a way to align elements to the left and right within a <div> container?

Answer №1

Answer №2

Similar questions

utilizing AJAX to retrieve scripts from WITHIN my own domain

Custom variables can be passed to subscription buttons through Paypal

Submitting an image from React and Redux to the backend: A comprehensive guide

What is the best way to create an HTML template with a table where the first column is divided into four cells and the second column only has one

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)

Mystery of the Unresponsive MD Ripple Button

Integrate an input field with a copy function similar to the GitHub clone view

the dropdown menu toggle is not working as expected

bespoke validation using AngularJS

It appears that Internet Explorer is still animating/processing my loading.gif despite being set to display:none

What is the best way to line up a number and text using CSS?

When getStaticPaths and getStaticProps are programmed to deliver results

Replace the single text area with multiple div elements and update the image within each div

Tips for scrolling content within a flex row that has a flex-grow-1 property

Using Ruby instead of Javascript in lessc

How to resolve the following error message: "MongoNotConnectedError: Client must be connected before executing operations."

Instructions for overlaying a text onto the select input field in DataTables

Troubleshooting on Safari for iOS

Unable to retrieve file from server

The validation tool provided on yahoo.com ensures that your markup code