Flexbox and positioning nightmare

I am trying to build a personal portfolio site and I got stuck at the main section when trying to position text with the image next to it and the button floating at the bottom right corner. Why are items cramped at the top and / or on top of each other ?

Thank you for taking a look into this.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans&family=Poppins&family=Raleway:wght@600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <title>Damian Roiz</title>
    
</head>
<body>

<header> 
    <nav>
    <a href="#" class="logo">Company Logo</a>
    <!-- Main Menu------------------------------------------------->
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>    
        </ul>
    </nav>
</header>   

    <!--mission statement------------------------------------------>
   
    <main class="text-container">
        <div class="mission">
            <h2>Hello,</h2>
            <h3>I'm Damian</h3>
            <h4>And I care a lot about empowering the people<br/>behind the business.</h4>
            <img src="./img/portrait.jpg" alt="Damian" class="model" alt="model">
            <button class="hire-btn">resume</button>      
        </div>
    
    </main>

</body>
</html>```
html {
  box-sizing: border-box;
}

Here is the css


*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f6f5f5;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: ivory;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
  padding: 0px 5%;
}

nav ul {
  display: flex;
}

nav ul li a {
  margin: 30px;
  font-family: "Lato", sans-serif;
  color: #505050;
  font-size: 15 px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.logo {
  font-family: "Open Sans", sans-serif;
  color: rgb(50, 50, 50);
  font-size: 30px;
  letter-spacing: 0.3px;
}

.active {
  font-weight: 700;
  color: #2d2a2a;
}

main {
  width: auto;
  height: 95vh;
  background-image: url("https://images.unsplash.com/photo-1531824475211-72594993ce2a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mission h2 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #0063cd;
  font-size: 50px;
  margin-bottom: 10px;
}

.mission h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1a1a1a;
  font-size: 60px;
}

.mission h4 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #403e3e;
  font-size: 30px;
  line-height: 30px;
}

.text-container button {
  position: absolute;
  right: 7%;
  width: 160px;
  height: 45px;
  background-color: #1e90ff;
  border: 2px solid #373636;
  border-radius: 18px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  outline: none;
}

button:hover {
  transform: scale(1.03);
  transition: all 0.1s ease 0s;
}

.model {
  position: absolute;
  height: 560px;
  top: 100px;
  left: 82%;
  transform: translateX(-70%);
  border: 5px solid #f6f5f5;
  border-radius: 20px;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
}

Hi @damianroiz
Absolute positioning isn’t the best approach here as it will be extremely difficult to make this responsive. Also, it’s superfluous as flexboxes or the box model would do the job perfectly.

Currently the problems are:

  1. The image is position absolute. That means it doesn’t determine the parent element’s height anymore. And it is independent of any sibling elements. That’s why the headlines overlap the image. The headlines still behave like block elements which now can take the whole space.
  2. The button would stick at the bottom of the main container if you’d give it a bottom: 0 attribute. But it could still overlap the image or headlines dependent on the browsers size.
  3. The display: flex on the main element doesn’t have an effect as it affects only direct child elements.

Possible solution with flex-box:

  1. Remove all absolute positions.
  2. Remove flex-direction: column; from the .text-container.
  3. Remove the div.mission and add the class to the .text-container.
  4. Remove the transition from the image.
  5. Wrap the headlines in a div. Wrap the image and the button in another div.

HI thank you for replying. I added your suggestions before posting this and I ended up with all items misaligned. All I need is to have the text on the left side and image and button at the right side and have the right side stack under the text as the page shrinks.

Anyways, here is the code after going through your checklist, still does not work :woozy_face:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans&family=Poppins&family=Raleway:wght@600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <title>Damian</title>
    
</head>
<body>

<header> 
    <nav>
    <a href="#" class="logo">Company Logo</a>
    <!-- Main Menu------------------------------------------------->
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>    
        </ul>
    </nav>
</header>   

    <!--mission statement------------------------------------------>
   
    <main >
        <div class="mission">
            <h2>Hello,</h2>
            <h3>I'm Damian</h3>
            <h4>And I care a lot about empowering the people<br/>behind the business.</h4>
        </div>    
        <div class="mission-img">
            <img src="./img/portrait.jpg" alt="Damian" class="model" alt="model">
            <button class="hire-btn">resume</button> 
        </div>
    </main>

</body>
</html>
/*
font-family: 'Raleway', sans-serif; (600)
font-family: 'Lato', sans-serif; (300, 400)
font-family: 'Open Sans', sans-serif;
font-family: 'Poppins', sans-serif;

*/

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f6f5f5;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: ivory;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
  padding: 0px 5%;
}

nav ul {
  display: flex;
}

nav ul li a {
  margin: 30px;
  font-family: "Lato", sans-serif;
  color: #505050;
  font-size: 15 px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.logo {
  font-family: "Open Sans", sans-serif;
  color: rgb(50, 50, 50);
  font-size: 30px;
  letter-spacing: 0.3px;
}

.active {
  font-weight: 700;
  color: #2d2a2a;
}

main {
  width: auto;
  height: 95vh;
  background-image: url("https://images.unsplash.com/photo-1531824475211-72594993ce2a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.mission h2 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #0063cd;
  font-size: 50px;
  margin-bottom: 10px;
}

.mission h3 {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1a1a1a;
  font-size: 60px;
}

.mission h4 {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #403e3e;
  font-size: 30px;
  line-height: 30px;
}

.mission-img button {
  position: relative;
  right: 7%;
  width: 160px;
  height: 45px;
  background-color: #1e90ff;
  border: 2px solid #373636;
  border-radius: 18px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  outline: none;
}

button:hover {
  transform: scale(1.03);
  transition: all 0.1s ease 0s;
}

.model {
  position: relative;
  height: 560px;
  top: 100px;
  left: 82%;
  border: 5px solid #f6f5f5;
  border-radius: 20px;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
}

The most important thing is missing: Add display: flex to <main>.
In order to display the image below the headlines on a certain browser width, you could add flex-wrap: wrap to the main element as well and play around with the flex-basis property for the child elements. Or, for more control, add a media query and set the flex-direction to column for small browser widths.
Remove the fixed height and width from the image as that will spoil all of your efforts.