0

I'm really new in html

This is my code

<div class="w3-row">
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br>
        To become the best foundation that is able to nurture holistic global leaders</p>
    </div>


    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br>
        Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best
        solution for mankind through Islamic values</p>
    </div>
</div>

So I have 2 column in a row. This is what happened

my first column leaves empty white space below it

Is there any way to have both my columns to extend to 100% parent div's height?

Asyraf Arifin
  • 2,445
  • 2
  • 7
  • 11

3 Answers3

1

Use flex

.w3-row{
display: flex;
align-items: center;
}

.w3-container {
flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w3-row">
    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>VISION</b></br></br>
        To become the best foundation that is able to nurture holistic global leaders</p>
    </div>


    <div class="w3-container w3-half w3-padding-64 w3-orange w3-text-white w3-center" style="height:100%">
        <p style="font-size:calc(11px + 1vw);"> OUR <b>MISSION</b></br></br>
        Developing young muslim leaders by nurturing entrepreneurial mindset in order to provide the best
        solution for mankind through Islamic values</p>
    </div>
</div>
Supraja Ganji
  • 1,187
  • 1
  • 6
  • 8
1

One solution is to use flex like @Supraja suggested, but an even simpler solution is to give the orange bg to the container of the columns instead of the column itself.

so put .w3-orange on the div with w3-row class:

<div class="w3-row w3-orange">
Tomer
  • 17,787
  • 15
  • 78
  • 137
0

Thats the problem of responsive layouts.

Add the orange background-color to the w3-row.

To prevent the different hights you have to add some hight values to your .w3-containers.

MFGSparka
  • 145
  • 9