Currently working on a new project and here's the page I'm focusing on:
The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this issue would be greatly appreciated!
Realized there was an error in my code, here is the corrected version:
CSS:
.steps {
width: 500px;
height: 70px;
display: block;
padding: 10px;
}
HTML:
<div class="steps">
<a href="http://www.advantagegrandcanyon.com"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/BackButton.png"></a>
<img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/Step1.png">
<a href="http://www.artificialmarketingsolutions.com/step-2-choose-your-trip-duration"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/NEXT.png"></a>
</div>
Description below the images:
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/"><img class="imgs alignnone size-full wp-image-27" alt="FullGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/FullGrand.jpg" width="274" height="204" /></a>
<strong>Full Grand Canyon Trip Features:</strong>
<ul>
<li>Longest Route Option</li>
<li>Up to 187, 225 or 279 River Miles</li>
<li>Motorized Trips from 6-10 Days</li>
<li>Non Motorized Trips from 10-18 Days</li>
<li>No Mandatory Hiking In or Out</li>
<li>Over 104 Rapids</li>
<li>All Raft Types Available</li>
</ul>
Full canyon river trips begin at Lees Ferry, river mile zero, and continue downstream to one of the "take out" or departure points. These take-out points are as follows: The Whitmore Helipad at river mile 187, the Diamond Creek Road at river mile 225, a take-out via jetboat ride across Lake Mead beginning just below Separation Canyon at river mile 240 or Pearce Ferry river mile 279.
</div>
<div id="middle">
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/"><img class="imgs alignnone size-full wp-image-29" alt="UpperGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/UpperGrand.jpg" width="274" height="204" /></a>
<strong>Upper Canyon Trip Features:</strong>
<ul>
<li>Shortest Route Option</li>
<li>89 River Miles</li>
<li>Motorized Trips 3-5 Days</li>
<li>Non Motorized Trips 5-8 Days</li>
<li>Must Hike out 7.5-10 miles</li>
<li>Over 41 Rapids</li>
<li>All Raft Types Available</li>
</ul>
Running from Lees Ferry to Phantom Ranch in the heart of the Grand Canyon, the upper portion is 89 miles long. Upon leaving Lees Ferry, you will quickly enter Marble Canyon. Within a few miles, the first signs of the fascinating geology of the canyon begin to appear as the Kaibab and Toroweap formations make their appearance, followed by Coconino Sandstone.
</div>
<div id="right-side">
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/"><img class="imgs alignnone size-full wp-image-28" alt="LowerGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/LowerGrand.jpg" width="274" height="204" /></a>
<strong>Lower Canyon Trip Features:</strong>
<ul>
<li>Multiple Trip Length Options</li>
<li>98, 136 or 190 River Miles</li>
<li>Motorized Trips 5-6 Days</li>
<li>Non Motorized Trips 7-10 Days</li>
<li>Must Hike in 7.5-10 miles</li>
<li>Over 60 Rapids</li>
<li>All Raft Types Available</li>
</ul>
Your trip will begin at the South Rim of the Grand Canyon. All passengers going on lower canyon trips spend part of day 1 hiking down Bright Angel Trail to Phantom Ranch (approx. 10 Miles) or to Pipe Creek Beach (approx. 7.5 Miles) depending on the outfitter’s exact meeting point.
</div>
<div id="info-container" style="width:100%; height: 100%; display: inline-block;">
<div id="left-info">
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/">More Info</a>
</div>
<div id="middle-info">
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/">More Info</a>
</div>
<div id="right-info">
<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/">More Info</a>
</div>
</div>