0

I amm trying that the tomato color stripes in the columns are aligned at the top of each column, the left column is applied the property justify-content: center; and flex-direction: column; I have tried to align itself from the start using justify-self: flex-start; or align-self: flex-start; but neither achieves the effect I want.

Here the relevant section

Column

.one {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

The css for the element that I requires moving to the top

.mark {
  background-color: tomato;
  min-height: 50px;
  width: 100%;
  /* justify-self: flex-start; */
  align-self: flex-start;
}

Please take a look to the current state

#app {
  display: flex;
  
}

.one, .two {
  flex: 1
}

.one {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mark {
  background-color: tomato;
  min-height: 50px;
  width: 100%;
  justify-self: flex-start;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table th, table td {
  border: none;
  padding: 10px;
}

table tbody > tr:nth-child(2n) > td, table tbody > tr:nth-child(2n) > th {
  background-color: #fff7db;
}

table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {
    background-color: #e5e6f3;
}

table th {
  height: 50px;
}

.collection {
  background-color: tomato;
}
<div id="app">
  <div class="one">
    <div class="mark"></div>
    <h1>Text</h1>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
  </div>
  <div class="two">
    <table>
      <thead>
        <tr>
          <th colspan="3" class="collection">Collection</th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Thank you for your advices

Mario
  • 4,784
  • 3
  • 34
  • 50
  • Do you want the `H1` and the `P` to be centered? – Ahmad Dalao Aug 27 '20 at 00:44
  • That's right, `h1` and `p` must be centered, but `mark` must stay on top – Mario Aug 27 '20 at 00:48
  • HTML: `

    Text

    Lorem ipsum dolor sit amet consectetur.

    ` CSS: `.mark-wrap { height: 100%; display: flex; flex-direction: column; } .text-holder { margin: auto; }` hope that helped.
    – Ahmad Dalao Aug 27 '20 at 00:51
  • sorry kinda missed up since the mode closed the question I can't tide it up :( – Ahmad Dalao Aug 27 '20 at 00:51
  • no problem, I try and let you know – Mario Aug 27 '20 at 01:06
  • Did that work for you? – Ahmad Dalao Aug 27 '20 at 01:36
  • I just tried but with no success. my mistake is partially resolved, could you take a look at this fiddle, https://jsfiddle.net/ngjr7q4d/ content inside `text-holder` goes to the bottom – Mario Aug 27 '20 at 01:40
  • https://i.ibb.co/LRmx3vt/so.png that's how I see it, is that your desired result? – Ahmad Dalao Aug 27 '20 at 01:44
  • https://codepen.io/ahmaddalao/pen/PoNmNQv Also please note when I run the code on my editor I had bootstrap. and the image I provided was the result I got. – Ahmad Dalao Aug 27 '20 at 01:52
  • i.ibb.co/LRmx3vt/so.png it's just what I'm looking for – Mario Aug 27 '20 at 01:55
  • How have you done so that the row of thead is the same size as the div with class mark? – Mario Aug 27 '20 at 01:56
  • I really didn't change anything you made I just add your code to my editor and I made some changes to the HTML and added two CSS classes and shared those with you. Maybe it's bootstrap who's helping me there?. OK I removed bootstrap and I got the same result as I showed you in the image. nothing has changed. – Ahmad Dalao Aug 27 '20 at 01:58
  • Now its works, thank you. My mistake when following your example was not enclosing with mark-wrap all the content including text-holder – Mario Aug 27 '20 at 01:59
  • oh glad I was able to help :) – Ahmad Dalao Aug 27 '20 at 02:00

0 Answers0