How to move flex content to top of div?

Question

Stubborn text will not move to the top of the div.. no matter what i do? Please help

<div class="totals" style="display:flex; align-content: flex-start; justify-content: space-between; width:100%; background-color:green;">
  <p style="color:#0e487f; background-color:red;">£1,000</p>
  <p style="color:#0e487f;">£50,000</p>
</div>

Thanks

Can you clarify which text should go where? The paragraphs are inside the div. — line-o, May 07 '21 at 15:35
I'd like the text to be at the top of the green div - there should be no green showing above the red box around the '£1000' — henry434, May 07 '21 at 15:37

Rickard Elimää · Accepted Answer · 2021-05-07T15:40:50.750

1

The margin from the p elements pushing the text down. You can easily see this if you right-click on the element and select "Inspect element".

Remove the margin, and add a padding to .totals if you still want the spacing (I haven't added a padding in the code).

Never ever use styles; use classes.

.totals {
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  width: 100%;
  background-color: green;
}

.value {
  color: #0e487f;
  margin:0px; /* ADDED*/
}

.red.value {
  background-color: red;
}

<div class="totals">
  <p class="red value">£1,000</p>
  <p class="value">£50,000</p>
</div>

edited May 07 '21 at 15:40

answered May 07 '21 at 15:37

Rickard Elimää

7,107
3
14
30

Oh nice you got it thanks! Yeah i know its not good the way im doing this.. Im writing a small bit of code to embed in a friends Wix website... so all needs to be done in 1 file – henry434 May 07 '21 at 15:40

Ichinator · Answer 2 · 2021-05-07T15:50:56.853

0

It's on top but you have a margin top and a margin bottom. You can see it with the inspector. It's a default CSS property of the p tag. Use padding instead on your div

#p1{
  background-color:red;
}

p{
  #0e487f; 
  margin:0;
}

.totals{
  display:flex; 
  align-content: flex-start; 
  justify-content: space-between; 
  width:100%; background-color:green;
}

<div class="totals">
  <p id="p1">£1,000</p>
  <p>£50,000</p>
</div>

An advice: don't use CSS inside html tag, create a separate file and call it in your page / template. In the worst case, use style tag and insert your CSS inside it.

edited May 07 '21 at 15:50

answered May 07 '21 at 15:46

Ichinator

357
2
11

Thank you mate. Oh cool, will look into Style tag. Just wondering - whats wrong with styling in html? – henry434 May 07 '21 at 15:47
Remove padding in total. @henry434 isn't looking for your answer. – Sato Takeru May 07 '21 at 15:47
2

@henry434 you have answers here: https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – Ichinator May 07 '21 at 15:53

score 0 · Answer 3 · answered May 07 '21 at 15:48

First , you have margin and maybe padding that you need to remove , i advise you to always start clean from margins and padding

* {
  padding : 0 ;
  margin : 0;
}

Second , if the parent element do sent have height then the flex items wont flex simply because there is no room

just add height ,remove padding your code is working and use classes

score 0 · Answer 4 · answered May 07 '21 at 15:58

<style>
    .totals{
        width: 100%;
        height: 50px;
        position: relative;
        background-color: green;
    }
    .first{
        color:#0e487f;
        background-color:red;
        position: absolute;
        left:0;
        top:-15px;
    }
    .second{
        color:#0e487f;
        background-color:red;
        position: absolute;
        right: 0;
        top:-15px;
    }
</style>

<div class="totals">
    <p class="first">£1,000</p>
    <p class="second">£50,000</p>
</div>

score 0 · Answer 5 · answered May 07 '21 at 17:19

.totals {
  display: flex;
  align-items: flex-start; /* use align-items: flex-start */
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: green;
}

.m-0{
  margin:0px; /* ADDED*/
}

.red {
  background-color: red;
}

<div class="totals">
  <p class="red m-0">£1,000</p>
  <p class="m-0">£50,000</p>
</div>

How to move flex content to top of div?

5 Answers5