How do I get one div to appear inside another div instead of below it?

Question

I created a nice div that needs to have two divs inside it : one for a photo and one for text. The photo is showing up nicely inside the parent div, but the text is appearing below the parent div, even though in my HTML code it is safely tucked within the parent div.

How do I get this text to appear inside the parent div, to the right of the photo?

Code:

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 120px;
}

#photo-box1 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="col-md-4" id="photo-box1"></div>
        <div class="col-md-8" id="text-box">
            <h2>Perform... with new friends.</h2>
            <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
        </div>
    </div>
</div>

And here is a photo of what it's doing now:

The "Perform... with new friends" needs to be inside the div, next to the photo.

Thank you.

I now realize that I have to use the Bootstrap system of container -> row -> column. However, when I add a row before my columns, the text now appears inside the div, as desired, but the photo virtually disappears, or is otherwise collapsed.

Current code:

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 15%;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

#photo-box1 {
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="row">
            <div class="col-md-4" id="photo-box1"></div>
            <div class="col-md-8" id="text-box">
                <h2>Perform... with new friends.</h2>
                <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
            </div>
        </div>
    </div>
</div>

Please help me get my picture back!

Answer 1

You should put both the columns of photo-box1 and the text-box inside a row column

<div class="row">
  <div class="col-md-4" id="photo-box1"></div>
  <div class="col-md-8" id="text-box">
    <h2>Perform... with new friends.</h2>
    <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 
    'public:about' %}" role="button">ABOUT US</a></p>
  </div>
</div>

Thank you guys for the answer on the row and row height. However, now the picture is bleeding out of the div on the left side. How do I get it to remain entirely inside its parent div?

Code:

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 15%;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

#photo-box1 {
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#card {
    height: 100%;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="row" id="card">
            <div class="col-md-4" id="photo-box1"></div>
            <div class="col-md-8" id="text-box">
                <h2>Perform... with new friends.</h2>
                <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
            </div>
        </div>
    </div>
</div>