CODEWITHSUNDEEP
jquerycss
AFS
AFS

Reputation: 1443

Div doesn't fills the 50% of the container

I need to fill one div with another two divs and these divs has to fill the 50% of the parent div, but the child divs only fills its content.

.uno {
  background-color: blue;
  width: 50%;
  display: inline;
}

.dos {
  background-color: green;
  width: 50%;
  display: inline;
}

.super {
  width: 100%;
}
<div class="super">
  <div class="uno">
    aaaaaa
  </div>
  <div class="dos">
    bbbbb
  </div>
</div>

Upvotes: 0

Views: 48

Answers (4)

Kirill Matrosov
Kirill Matrosov

Reputation: 6000

@AFS, if you use float, you lose parent's height. Solution with flex.

.uno{
  background-color: blue;
  width: 50%;
}
.dos{
  background-color: green;
  width: 50%;
}
.super{
  width: 100%;
  display: flex;
}
    <div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

Upvotes: 0

Foker
Foker

Reputation: 1011

As said earlier - try to change 'display' of children elements to 'block' and add 'float': 'left' in css. But you will have the problem - parent will behave like it has no children. Simplest way to fix it - add 'overflow': 'hidden' to .super

Upvotes: 0

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

You need to add float:left properties. Please check this:

.uno{
  background-color: blue;
  width: 50%;
  float:left;
}
.dos{
  background-color: green;
  width: 50%;
  float:left;
}
.super{
  width: 100%;
}
<div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: put float:left and display:block as shown below

.uno{
  background-color: blue;
  width: 50%;
  float:left;
  display:block;
}
.dos{
  background-color: green;
  width: 50%;
  float:left;
  display:block;

}
.super{
  width: 100%;
}
<div class="super">
      <div class="uno">
        aaaaaa
      </div>
      <div class="dos">
        bbbbb
      </div>
    </div>

Upvotes: 0

Related Questions