Styling text in nested divs

where i want the div texts
this is where i want my div texts
this is what my version of the example above… am i missing something (other then put the text in the divs but idk how to style it, ive tried alot of things)

Like i know the “div 3” text is meant to be center in the box-3 and then the other 2 div texts are meant to be center top but i just cannot get it working. maybe im having a dumb moment.
I want the “div 1” “div 2” “div 3” text where they are in the first example
Ive gotten this far with the nested divs , flexbox but idk how to add the text.
Please guide me
:smiley:

Hi, welcome to SP forums! :slightly_smiling_face:

The problem your facing with flexbox is the fact that when you introduce a text element ( a <p> tag) in your nesting it throws off the vertical alignment since they become flex items too.

What your wanting to do can be done but it won’t be very usable on the web.
For starters the fixed widths and heights need to go, but that would probably negate the look your after.

The text would need to be removed from the flow in the first two divs, that can be done with absolute positioning. The problem with that though is the text could spill into the next div visually if there is a lot of words.

With your html structure just add a class to the first two p tags.

<div class="container">
  <p class="top">Div 1</p>
  <div class="box-2">
    <p class="top">Div 2</p>
    <div class="box-3">
      <p>Div 3</p>
    </div>
  </div>
</div>

Then you would just slip this new selector in the css

p.top {
  position:absolute;
  top: 0;
}

You’ll need to set the parent divs as the containing block with position:relative;

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #353535;
  position: relative;
}

p.top {
  position:absolute;
  top: 0;
}

.container {
  margin:auto;
  min-height: 700px;
  width: 1100px;
  background: dodgerblue;
}

.box-2 {
  width: 770px;
  min-height: 390px;
  background-color: orange;
}

.box-3 {
  width: 467px;
  min-height: 178px;
  background-color: red;
}

</style>

</head>
<body>

<div class="container">
  <p class="top">Div 1</p>
  <div class="box-2">
    <p class="top">Div 2</p>
    <div class="box-3">
      <p>Div 3</p>
    </div>
  </div>
</div>

</body>
</html>
1 Like

Hello, thankyou.
This has opened my eyes.
Upon reading your response, i had a click.
I will strive to study more and better myself after this :slight_smile:
It made complete sense,
thank you once again!