Search code examples
htmlcssflexbox

How do I get text underneath my flexboxes?

So I'm doing The Odin Project and I'm on the Landing Page project. My problem is that I don't know how why my text is within my flexbox when it's supposed to be underneath it. I don't know what is wrong as other projects I've seen have code similar to mine and their text goes underneath and not within their flexboxes. My HTML and CSS code are below.

Odin project:

Odin Project

My project:

My Project

I've tried having the text as a <p> and taking it outside the flexbox div

 *{
    margin: 0;
  }

  body{
    background-color:#1F2937 ;
    height:1300px;
    
}

.header_content h1{
  display:inline-block;
  margin-left: 300px;
  padding-bottom: 30px;
}

ul{
  display:inline-block;
  margin-left: 800px;
}

li{
  display:inline-block;
  margin-left: 25px;
}


.blue_box{

  display:flex;
  margin-left: 300px;

}

.box_writing{

padding-right: 80px;

}

.placeholder{
  display:inline-block;
  background-color: #808080;
  height: 300px;
  width: 700px;
  color:white

}

.placeholder p{

text-align: center;
line-height: 300px;


}


.blue_button{
  padding-top: 12px;
}

button{

background-color: #3882F6;
border-radius: 6px;
border: none;
width: 130px;
height: 35px;
color: white;


}




.boxes {

    padding-top: 400px;
    

    color: #EEEEEE;
  }

.box1 {

    padding: 150px;
    background-color: #ffffff;
}

.title{

color: #1F2937;
font-size: 36px;
text-align: center;
position: relative;
top: -100px;
}

.info_boxes{

display: flex;
justify-content: center;
}

.one, .two, .three, .four{

border: 3px solid #3882F6;
border-radius: 10px;
height: 150px;
width: 150px;
margin: 10px;

}

.descript1{
color: #1F2937;
}


.box2 {

    padding: 150px;
    background-color: #e5e7eb;
}

.box3 {

    padding: 100px;
    background-color: #ffffff;
}
```
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Odin Landing Page</title>
      <link rel="stylesheet" href="index.css">
   </head>
   <body>
      <div>
         <header>
            <div class="header_content">
               <h1>Header Logo</h1>
               <ul>
                  <li>header link one</li>
                  <li>header link one</li>
                  <li>header link one</li>
               </ul>
            </div>
         </header>
      </div>
      <div class="blue_box">
         <div class="box_writing">
            <h1>This website is awesome</h1>
            <p>This website has some subtext that goes here under the</p>
            <p>main title. It's a smaller font and the color is lower</p>
            <p>contrast</p>
            <div class="blue_button">
               <button type="button">Sign up</button> 
            </div>
         </div>
         <div class="placeholder">
            <p>this is a placeholder for an image</p>
         </div>
      </div>
      <div class="boxes">
         <div class="box1">
            <!--box1 is the white box-->
            <div class="title">
               <p>some random information</p>
            </div>
            <div class="info_boxes">
               <div class="one">
                  <div class="descript1">
                     this is some subtext under an illustration or image
                  </div>
               </div>
               <div class="two"></div>
               <div class="three"></div>
               <div class="four"></div>
            </div>
         </div>
         <div class="box2">
         </div>
         <div class="box3">
         </div>
      </div>
   </body>
</html>

Solution

  • If you want the text to be outside the box it shouldnt be a child of said box.

    This is not what you want: 

    <div class="one">
  <div class="descript1">
     this is some subtext under an illustration or image
  </div>
</div>

    This is what you want (dont put text in a div like above, use a text element, such as a p tag):

    <div class="one">
</div>
<p class="descript1">
   this is some subtext under an illustration or image
</p>

    The issue now, is that the text is now a direct child of the "info-boxes" div, and since you have that div set to display:flex, the text will now become a flex item, and flow into the row with the rest of the boxes. Flex items are any elements that are direct childen of a flex container (a container with display: flex set on it)

    <div class="info_boxes">
   <div class="one"></div>
   <!-- This text is now a flex item because its a direct child of "info-boxes" -->
   <p class="descript1">
         this is some subtext under an illustration or image
   </p>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>
</div>

    If you want the box and the text to be treated as a single flex item so that the text can be below the box youll need to wrap both the box and the text in an additional div. This means the box and the text will no longer be direct children of "info-boxes", meaning they are no longer a flex item. The div they are wrapped in is now the flex item.

    <div class="info_boxes">
   <div class="box-container">
       <!-- These are no longer flex items -->
       <div class="one"></div>
       <p class="descript1">
             this is some subtext under an illustration or image
       </p>
   </div>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>
</div>

    Ultimately, flexbox works in one dimension. If you have a container with display: flex all of its children will flow into a row by default. If you want things to flow into a column you need to set the flex-direction to column, but the flex items will then no longer be able to flow into a row. You have to pick and choose. If you want something to flow in a different direction than what your flex direction is set to then you need to wrap them in an additional container.