December 19th, 2012, 11:21 AM
-
Pictures/Captions in 3 Column Layout
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.
December 19th, 2012, 01:10 PM
-
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;"
January 4th, 2013, 10:32 AM
-
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!!!