The two elements in my div get "lop sided" when I try to format them to fit my specifications

user_14237213 0
Viewed 52

I have a div that contains two elements. An Icon <i> and a textarea <textarea>.
I know exactly how I want this to look and did a quick mock up with the dimensions figured out. In case my mock up is too sloppy the layout is this.

The div .container has a width of 220px and a height of 35px width: 220px height:35px.

The two elements in the div are to be 4px apart and 4px from the border of the div. (Which I did with padding)

The icon .fa-plus-square has a height and width of 27px font-size: 27px. (I assumed this sets the width and height to be the same size, but I am unsure. This may be what is causing the problem)

The textarea .input has a width of 181px and a height of 27px width: 181px height: 27px.

Div Mock Up

Whats actually happening I have colored the add div blue to show you what the elements should be contained in.

Html Code

<div class="add">
    <i class="far fa-plus-square" type="submit"></i>
    <textarea class="input" placeholder="Add to To-Do list"></textarea>
</div>

Css

.add {
    background-color: blue;
    width: 220px;
    height: 35px;
}

.fa-plus-square {
    font-size: 27px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: rgb(254, 217, 67);
}

.input {
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    resize: none;
    width: 181px;
    height: 27px;
    outline: none;
}

Let me know if more information is needed.

css html
2 Answers

I don't have your icon, so I put an white border to simulate it. Here's the code to achieve something similar to your mock (read the comments):

.add * {
  box-sizing: border-box;     /* For precise calculations */
}

.add {  
    display: flex;            /* Align items in a row, vertically centered */
    align-items: center;
    background-color: blue;
    width: 220px;
    height: 35px;
}

.fa-plus-square {    
    color: rgb(254, 217, 67);
    width: 27px;              /* The next properties are to make */
    max-width: 27px;          /* limit the size of the icon no matter */
    height: 27px;             /* how big the font size. */
    max-height: 27px;
    margin-left: 4px;
    border: 1px solid white;  /* So we can see the icon placeholder */
}

/*
  Needed to add padding to
  the text area
*/
.wrapper {
  padding: 4px;
  flex-grow: 1;     /* Automatic adjustment */
  height: 100%;
}

.input {
    resize: none;
    outline: none;
    width: 100%;    /* Adapts automatically in size */
    height: 100%;   /* to what we specified before */
}
<div class="add">
    <i class="far fa-plus-square" type="submit"></i>
  <div class="wrapper">
    <textarea class="input" placeholder="Add to To-Do list"></textarea>
  </div>    
</div>

The results are precise:

enter image description here

user_51770450

The problem is that you didnt set the box-sizing property at all. This is the 1st thing you do, always. We use box-sizing: border-box 99% of the time, and in some very very rare cases we use others.

A fast fix to your layout.

* { box-sizing: border-box; }

.add {
    background-color: blue;
    max-width: 220px;
    
    // padding here and dispaly
    padding: 4px;
    display: flex;
    align-items: center;
}

.fa-plus-square {
    margin-right: 4px; // NOTE HERE
    
    font-size: 31px; // the actual size is 4px smaller // dont know why or how
    color: rgb(254, 217, 67);
}

.input {
    resize: none;
    width: 100%;
    height: 100%;
    outline: none;
}
<div class="add">
    <i class="far fa-plus-square" type="submit"></i>
    <textarea class="input" placeholder="Add to To-Do list"></textarea>
</div>

https://codepen.io/ShadiMouma/pen/NWNyWXO?editors=1100

user_86888700
Related