'Space Between margin/width pushing other element/div

Stackoverflow. So for the past couple of hours now I've been sitting here trying to figure this thing out and ripping my hair out. So I've come here to ask a question and hopefully get an answer.

My problem is I am trying to align 3 divs, that has text in them to be on the same line, but also be able to have a certain width and or margin-left, or margin-right without pushing the other divs.

What I currently have done to align all 3 divs is having a parent container with display flex, and then having child containers for each text.

Here's the code:

HTML

<div class="transactionSecondInnerWrapper">
<div class="transactionMiddleLeft">Text</div>
<div class="transactionMiddleMiddle">Text</div>
<div class="transactionMiddleRight">Text</div>
</div>

CSS

.transactionSecondInnerWrapper {
 display: flex;
 justify-content: space-between
}
.transactionMiddleLeft {
 margin-left: 10px /*This is what pushes my middle element/div but not the right one*/
}
.transactionMiddleRight {
  margin-right: 10px /*This also pushes when margin becomes bigger*/
}

Also I realized that whenever I update my text or make it longer in any way for example the left one, that will result in pushing the middle div aswell.

Thanks for reading.

Kind regards.

htmlcssflexbox


Solution 1:[1]

please use these properties in your child divs. And instead of margin please use padding. Hope, your problem will be solved.

.transactionMiddleLeft{
   flex: 33.33%;
   max-width: 33.33%;
   padding-left: 10px;
 }


.transactionMiddleMiddle{
       flex: 33.33%;
       max-width: 33.33%;
       padding-left: 10px;
     }



.transactionMiddleRight{
       flex: 33.33%;
       max-width: 33.33%;
       padding-left: 10px;
     }

Solution 2:[2]

Try this:

*{
box-sizing: border-box;
}
.transactionSecondInnerWrapper {
 display: flex;
}
.transactionMiddleLeft {
 padding-left: 2%;
 text-align: left;
}
.transactionMiddleRight {
  padding-right: 2%;
  text-align: right;
}
.transactionMiddleMiddle{
  text-align: center;
}
.transactionMiddleRight,.transactionMiddleLeft,.transactionMiddleMiddle{
 width: 33.33%;
 word-wrap: break-word;
  border: solid red 1px;
}
<div class="transactionSecondInnerWrapper">
<div class="transactionMiddleLeft">TextTextTextTextTextTextTextTextTextText</div>
<div class="transactionMiddleMiddle">Text</div>
<div class="transactionMiddleRight">Text</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rafsan
Solution 2 Arman Ebrahimi

Related Questions