How to Make a Div Not Wrap

Div elements do not wrap on the next line

Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/

Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width.

/* CSS */
.parent {  display: flex;  flex-wrap: wrap;  justify-content: center;  margin: 0 auto;  /* changed */  width: 100%;}
.headline {  display: block;  width: 100%;}
.container {  margin: 0px 10px;}
.image {  width: 300px;  height: 200px;}

<!-- HTML --><div class="parent">  <div class="headline">    <h2>Tea of the Month</h2>    <h4>What's Stepping at The Tea Cozy?</h4>  </div>  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Fall Berry Blitz Tea</p>  </div>  <!-- </div> REMOVED -->  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Spiced Rum Tea</p>  </div>  <!-- </div> REMOVED -->  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Seasonal Donuts</p>  </div>  <!-- </div> REMOVED -->  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Myrtle Ave Tea</p>  </div>  <!-- </div> REMOVED -->  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Bedford Bizarre Tea</p>  </div>  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Bedford Bizarre Tea</p>  </div>  <div class="container">    <img src="https://placehold.it/300x300" class="image">    <p>Bedford Bizarre Tea</p>  </div></div>

div not wrapping

Update your CSS with the overflow:hidden property inside your parent div

#wrapper {
    background-color: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

Explanation About Clearing floats

A common problem with float-based layouts is that the parent div's doesn't want to stretch up to accommodate the child floated div's. If you will add a border around the parent div you'll have to command the browsers somehow to stretch up the parent div all the way.

Now see the problem as you were facing: demo

its because you didn't clear the floats on that time.

So the Old Solution of this problem is clear:both;

if you will add extra div after the child floated elements like mentioned below code this will clear the floats:

<div class="parent">
  <div class="left-child"></div>
  <div class="right-child"></div>
  <div style="clear:both;"></div>
</div>

New Solution is overflow:hidden;
if you will give overflow:hidden to your parent div this will automatically clear all the child floated elements inside the parent div.

see the new solution demo: tinkerbin.com/WKqFS7Lc

Prevent wrapping of span or div

Try this:

.slideContainer {    overflow-x: scroll;    white-space: nowrap;}.slide {    display: inline-block;    width: 600px;    white-space: normal;}

<div class="slideContainer">    <span class="slide">Some content</span>    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>    <span class="slide">Even more content!</span></div>

Prevent wrapping of elements inside a div

not sure if this is what you want but try so:

#list{  width:80px;  height:200px;  overflow-y:scroll;  white-space:nowrap;}

<div id="list">  <input type='checkbox' value='All'>All  <br>  <input type='checkbox' value='San Francisco'>San Francisco  <br>  <input type='checkbox' value='North Carolina'>North Carolina  <br>  <input type='checkbox' value='New York'>New York  <br>  <input type='checkbox' value='New York'>New York  <br>  <input type='checkbox' value='New York'>New York  <br>  <input type='checkbox' value='New York'>New York  <br>  <input type='checkbox' value='New York'>New York  <br>  <input type='checkbox' value='New York'>New York  <br></div>

Text not wrapping inside div element

Check this snippet out. You just need the word-break and the width

#text0 {  word-break: break-word;   width: 500px;   background-color: #afed67; }

<div id="text0">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble        it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

parent div don't wrap child div

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

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