divs are not nesting

Question

Trying to get these divs to nest next to one another.

HTML:

<div class="container">
    <div class="info">
        <h3>What?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
        <h3>Where?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
        <h3>Why?</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue hendrerit sem, et malesuada nibh. Curabitur non ultrices sapien. Curabitur sed adipiscing elit. Nulla diam lorem, luctus nec mauris non, malesuada dignissim velit. Suspendisse lacinia blandit arcu ac pharetra. Praesent vitae sodales turpis. Nam nibh quam, tempor vitae accumsan vitae.</p>
    </div>
    <div class="schedule">
        SCHEDULE OF EVENTS
    </div>
</div>

CSS:

.container {
   width: 85%;
   margin: 0 auto;
}
.info {
   width: 70%;
}
.schedule {
   width: 30%;
}

JSFIDDLE

Answer 1

First, the elements display as block. This mean they wont get inline. Second, because of the 'hidden' space in between your elements, the total width is > 100% (If you inspect you should see a text node with a space in it and this text node has a width). There are 2 fix for this problem.

1) Set display: inline-block on both elements. Then, dont put a line break and tabs between the /div and the div. See this fiddle .

.info {
  width: 70%;
  display:inline-block;
}
.schedule {
  width: 30%;
  display:inline-block;
}

</div><div class="schedule">

2) Set float-left on both elements. This way, there will be no hidden spaces. See this fiddle .

.info {
  width: 70%;
  float:left;
}
.schedule {
  width: 30%;
  float:left;
}

Answer 2

The div info must be wrapped individually inside a container that gives them a width to adopt together

.container {
   width: 100%;
   margin: 0 auto;
}
.info {
   width: 30%;
   float:left;

}

Like in the fiddle

FIDDLE