CODEWITHSUNDEEP
htmlcss
iphoneminus10
iphoneminus10

Reputation: 13

How to make two elements both fill parent element (height)?

I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.

How it looks right now

What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".

I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.

The CSS code:

body{background-color: black}

.wrapper
{
    background-color: grey;

    padding: 0;
    margin: 0;
}

input
{
    font-size: 30px;
}

.button
{
  background-color: green;

  padding-left: 10px; 

  width: 100px;
  height: 100%;

  display: inline-block;
}

and the HTML code:

<body>
    <div class="wrapper">

        <input type="text" size="5"/>

        <div class="button">
            <p>
                Button
            </p>
        </div>

    </div>
</body>

I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.

Thankful for any advice.

Upvotes: 1

Views: 443

Answers (2)

Eric
Eric

Reputation: 1126

On the wrapper class add display: flex; and on the input tag add flex: stretch;

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115011

Just use flexbox

body {
  background-color: black
}

.wrapper {
  background-color: grey;
  padding: 0;
  margin: 0;
  display: flex;
}

input {
  font-size: 30px;
}

.button {
  background-color: green;
  padding-left: 10px;
  width: 100px;
}
<body>
  <div class="wrapper">

    <input type="text" size="5" />

    <div class="button">
      <p>
        Button
      </p>
    </div>

  </div>
</body>

Upvotes: 1

Related Questions