[Mschoaf]

Not being very advanced with CSS, I have been struggling to get a new site developed from someone else's build out and sample pages. I am now at a point where I have 3 linked images and want to display some descriptive text below each on. I've finally gotten a nice 3 column layout done, but the text flows outside of the div that it lives in. I'm hoping it's an easy fix, but I'm quite lost at the moment.

CSS:
.colcontainer {width:100%; text-align:center;float:left; width: 100%; overflow: hidden; white-space: nowrap;}
.threecolcell { display: inline-block; width: 33%; }
.colcontainer img {display:block; margin:0 auto; text-align:center;}

HTML:
<div class="colcontainer">
<div class="threecolcell"><a href="http://ilpga.bluegolf.com/util/gosecure.htm?secure=%2fsecure%2filpga12%2fcharity%2fstart%3fpgm%3d2af" target="_blank"><img src="/content/images/foundation/donate_annual.gif" alt="Donate Annual Gift"></a>Made to the 2012 Annual Fund. Unrestricted gifts that support many Foundation priorities and operations.</div>
<div class="threecolcell"><a href="http://ilpga.bluegolf.com/util/gosecure.htm?secure=%2fsecure%2filpga12%2fcharity%2fstart%3fpgm%3dipgafihog" target="_blank"><img src="/content/images/foundation/donate_honor.gif" alt="Donate Honor Gift"></a>Made by a donor to honor a living individual. Considered Annual Fund Gifts unless otherwise noted.</div>
<div class="threecolcell"><a href="http://ilpga.bluegolf.com/util/gosecure.htm?secure=/secure/ilpga12/charity/start?pgm=ipgafimg" target="_blank"><img src="/content/images/foundation/donate_memorial.gif" alt="Donate Memorial Gift"></a>ade by a donor to honor a deceased individual. Considered Annual Fund Gifts unless otherwise noted.</div>
</div>

Link to dev page in question is:
ipgadev.ipcinc.net/foundation/index.asp

You'll notice the site is also a responsive css design if that matters.

Thanks.

[EEsterling]

Your "colcontainer" has the property "white-space: nowrap;" that's causing the problem. The children "threecolcell" are inheriting that. Override the inheritance by restoring normal behavior: "white-space: normal;"

[Mschoaf]

Originally Posted by EEsterling

Your "colcontainer" has the property "white-space: nowrap;" that's causing the problem. The children "threecolcell" are inheriting that. Override the inheritance by restoring normal behavior: "white-space: normal;"

Many thanks for your help EEsterling!!!