CSS div overlap

Question

I have a webpage where all of the modules resize perfectly fine when the browser window is shrunk except for the bottom one. The code is near identical, however, the divs overlap instead of dropping to a new row.

The page code is:

<div itemprop='articleBody' class="container-fluid" style="background-image: url('/site3/images/what_it_does/Dollarphotoclub_93657809.jpg'); color: #ffffff;">
<h1 style="text-align: center; color: #ffffff;">Golf Simulation</h1>
<hr style="border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;" width="50%" />
<p style="text-align: center; color: #ffffff; font-size: 1.25em; margin-left: 45px; margin-right: 45px;">Play on one of the premium or primary courses, hit a bucket at the driving range or putting green, challenge friends or compete live with players around the world. The high-resolution 3D graphics are detailed in every angle and show your ball in real time. Explore the variety of Golf Simulation environments and opportunities the P3 offers:</p>
<div id="table" style="display: inline-block; text-align:center;">

<div style="display: inline-block; vertical-align: top; width:18%;">
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Golf-Courses.png" alt="" width="80" height="80" />
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">GOLF COURSES</p>
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Over 90 courses and tons of game play features for up to 8 players at a time.</p>
</div>

<div style="display: inline-block; vertical-align: top; width:18%;">
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Driving-Range.png" alt="Driving_Range" width="80" height="80" />
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">DRIVING RANGES</p>
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Multiple ranges and ball trails with instant response for quick repetition work.</p>    
</div>

<div style="display: inline-block; vertical-align: top; width:18%;">
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Putting-Greens.png" alt="Putting_Greens" width="80" height="80" />
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">PUTTING GREENS</p>
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Multiple distances and slopes and ability to chip anywhere.</p>
</div>

<div style="display: inline-block; vertical-align: top; width:18%;">
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Competitions.png" alt="Competitions" width="80" height="80" />
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">COMPETITIONS</p>
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Hours of fun tournaments or friendly play from longest drive, to closest to the pin.</p>
</div>

<div style="display: inline-block; vertical-align: top; width:18%;">
<img style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px;" src="/site3/images/what_it_does/Online-Play.png" alt="Online_Play" width="80" height="80" />
<p style="font-size: 1.75em; text-align: center; color: #ffffff; margin-top: 20px;">ONLINE PLAY</p>
<p style="text-align: center; color: #ffffff; margin-top: 10px; margin-left: 25px; margin-right: 25px;">Set up a private or public game, or play in daily competitions or online tournaments.</p>
</div>


</div> <!-- End Table -->
</div> <!-- End Container fluid -->

The page can be viewed at http://www.p3proswing.com/site3/index.php/about/what-it-does

Any help to resolve that last section would be appreciated. It needs to be able to be responsive so it can be mobile friendly. For some reason this last module is not.

Thanks in advance.

Answer 1

Every column has a width of 18% in your example. Try to set a min-width for each column of eg 150px and the columns will drop to the next line when the browser window is too small.

<div style="display: inline-block; vertical-align: top; width:18%; min-width:150px;">...</div>