CODEWITHSUNDEEP
htmlcss
infodev
infodev

Reputation: 5235

parent div don't wrap child div

I have nner and outer div.

normally the parent div wrap the child div but in my case child div have the same width than the parent.

I'm expecting that inner-container width is the same as input and not outer-container Here an example to well understand

.outer-container{
    width: 60%;
    margin: auto;
    background-color: white;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
    text-align: center;
    margin-top: 40px;
    min-height: 200px;
}

.innercontainer {
    background-color: #f3f3f3;
}
<div class ="outer-container">
  <div class=" innercontainer">
    <div>
     Last name: <input type="text" name="lname"><br>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1511

Answers (3)

Amitoz Deol
Amitoz Deol

Reputation: 442

You just need to add this to .innercontainer:

display: inline-block;

https://codepen.io/amitozdeol/pen/LrbvBo

Upvotes: 0

user2226755
user2226755

Reputation: 13223

You can use display:inline-block; like that :

.outer-container {
  width: 60%;
  margin: auto;
  background-color: white;
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 40px;
  min-height: 200px;
}

.innercontainer {
  background-color: #f3f3f3;
  display:inline-block;
}
<div class="outer-container">
  <div class=" innercontainer">
    <div>
      Last name: <input type="text" name="lname"><br>
    </div>
  </div>
</div>

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

Try assigning display:inline-block to your innercontainer element. Try this code.

.innercontainer {
  background-color: #f3f3f3;
  display: inline-block;
}

Upvotes: 3

Related Questions