#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    6
    Rep Power
    0

    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.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    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;"
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    6
    Rep Power
    0
    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!!!

IMN logo majestic logo threadwatch logo seochat tools logo