7 Replies Latest reply on Mar 9, 2010 5:31 AM by martcol

    Help with div container thumbnails

    onefiftymph Level 1

      Learning and experimenting with css questions:


      I want thumbnail containers containing jpgs and text that wrap to browser width just like thumbnail jpgs. These will eventually be put in a spry collapsible panel.



      1- How to make "no-wrap" text? I want my containers to stretch the width of widest line


      2 - What did I do to make my containers wrap strangely when browser window is resized...sometimes aligning right? I want them to stack on evenly spaced rows left to right.








        • 1. Re: Help with div container thumbnails
          martcol Level 4

          Your main container div looks like you intend to have this rule apply to it:


          #page-container {
               text-align: left;
               padding: 6px;
               border-top-width: 1px;
               border-right-width: 1px;
               border-bottom-width: 1px;
               border-left-width: 1px;
               border-top-style: solid;
               border-right-style: solid;
               border-bottom-style: solid;
               border-left-style: solid;
               float: left;


          Your div has an id like this: id="#pg-container"


          First off, I don't think that you are allowed to put the # in an id in your HTML but you do of course need it in your CSS to target the ID.


          At the end of your page you have a couple of stray tags I think.  They look like table tags.  I think you should delete them to help tidy up your page a bit.


          Does that make any difference?  If you can make sure your code is spot on, it will help you achieve what you want.



          • 2. Re: Help with div container thumbnails
            onefiftymph Level 1

            Thanks for trying to help Martin. I fixed up some the inconsistencies you pointed out and the page is better...


            Still need help with my 2 questions though....

            • 3. Re: Help with div container thumbnails
              martcol Level 4

              Try this:


              .tn-container {
                  background-color: #FFF;
                  float: left;
                  width: 230px;
                  text-align: center;
                  padding: 2px;
                  height: 250px;
              #page-container {
                  text-align: left;
                  padding: 6px;
                  border: solid black 1px;

                  overflow: hidden;


              What I think was happening was that because your individual image containers had no heigh specified some protruded below the bottom line of the row of containers.  This meant that because of the way the browser renders floats, the lower edge of a protruding element prevented it from floating back to the edge you expected it to.


              I've put a height of 250px on it but you will need to think of how high you want it to be.


              I've used a shorthand for your border.


              I've added overflow hidden - I can't explain what that does because I don't really understand it but it helps the floated elements stop spilling out of their container.


              I've removed float left from the page container because that's its default position anyway


              You also have one stray </div> at the bottom of your page.



              1 person found this helpful
              • 4. Re: Help with div container thumbnails
                onefiftymph Level 1

                Thanks so much Martin!  Much better - The containers flow and break on the page correctly now. I deleted the extra div and reduced the container height.


                Still.... I need a "no wrap" on the text lines, the width of which changes with each thumbnail....(I will have a max. line length/image width eventually)

                In .tn-container I have  width: 230px;  because I don't know what to do, but I want the width to be say, 10 pixels padding left & right from the widest element, whether it is the photo or the text.


                I hope this isn't too confusing....


                Another question -  Can the entire div tn-container be a link (that would be handy), or am I required to have a separate a href= for each image and each text link?


                Revised files uploaded...






                btw, this is for more than just 1 pg. on a personal site...

                • 5. Re: Help with div container thumbnails
                  martcol Level 4



                  I am not sure that I understand but this might be it...


                  .tn-container {
                  padding:2px 10px;

                  The only thing that concerns me about that, if it's your solution is that I am not sure about width: auto with a float.  I do know that a floated element has to have a width expressed but I don't know if auto is ok.

                  If this doesn't work, then I suggest you reframe your question in  a new thread.  Because you have marked this as answered it may not attract the expert attention that might help us both!


                  • 6. Re: Help with div container thumbnails
                    onefiftymph Level 1

                    Thanks bud! That took care of the "no wrap" problem and does what I'm after.


                    So I populated the page with more images and containers to have a look at a more finished product. The DW doc looks pretty awful - just one huge horizontal row 5 ft. wide! (Maybe there's some kinda of "div/container wrap" like "word wrap" somewhere..) I'm willing to live with this I suppose. Also, with vertical thumbnails, I realize I'm going to have to define how the bottom of the lowest element (the date) of one row defines where all the images at top of the next row align... Right now, the date text just drops off on vertical pix. I added padding-bottom: 15px; to .tn-date, but don't think that's the answer...


                    I only marked your answer as "helpful", not "answered"  (I thought..) to give you some points?... whatever those are...($?)


                    I'm gonna keep at it awhile and maybe start a new thread tomorrow...


                    thanks again

                    • 7. Re: Help with div container thumbnails
                      martcol Level 4

                      Hello again


                      I just had another quick look at your page and it still appearst to me that you don't have enough height on the image containers as the problem that mucks up your layout still happens with the images in potrait format.  One way to test or see what's happening is to temporarily add a thin border to that element and it will show you how each box is rendering.  Once you visualise it, it might help you solve it.


                      Another thing to point out is that you might also like to consider using the Firefox browser.  You can get a couple of plug ins for that which help web developers and are very highly rated.  One is called web developer which gives you the ability through the toolbar to temporarily outline different components of your page e.g. all floated elements.  It does a heap of other things and you can find out most of it through trial and error so no steep learnign curve there.


                      The other plug in is Firebug which is superb for CSS.  You can edit the CSS "live" in your page and see the changes take place as you fiddle.  Once you decide upon a setting you have to nip back to DW and make your edits but it really is a fantastic tool.  It's not quite as easy to work out as Web Developer but it's not that hard.  Firefox and the two plug ins are all free so having a go is well worth it!


                      With your layout, you might like to think about giving your main container a max-width.  That might stop DW rendering it as a five foot wide page!  Just a tthought.


                      It is a problem trying to make a nice neat arrangement of thumbnails when they are all different sizes.  You could try arranging them on the page with all the portrait images at the end but with such a fluid layout that still might not be entirely satisfactory.