On Mar 19, 2010, at 2:37 AM, Peter Abramowicz wrote: > On 18/03/2010 2:40 PM, Rory Bernstein wrote: >> >> Hi All, me again. >> >> http://rorybernstein.com/francesca_proto/book1.html >> >> So, I now have a new page. On the URL above, I have 2 problems: >> >> 1. I want the div called #book_images to have the images it containts to sit >> on the bottom of that div (bottom aligned). I tried changing the position to >> absolute and using bottom: 0; but it does not work; it puts the whole div in >> a totally different place (moves it up and almost totally out of the >> window). Here's the rules for that div now (the blue border is just so you >> can see it better): >> #book_images { >> position: relative; >> border: 1px solid blue; >> width: auto; >> overflow: hidden; >> } >> >> 2. I want that same div to always be just as wide as it needs to be to >> contain whatever images might be there, as they go out horizontally to the >> right. If the images are fewer, I don't want the page to scroll out farther >> than it needs to go. Currently, its parent-parent container >> (#nav_item_container) has a fixed width; if I don't use this fixed width, >> the whole div moves down under #nav. And, I don't want to break the layout >> if the images that get put in there exceed that width. How do I code this >> for a variable width in the best way? Part of the trouble seems to be that >> my #nav div has to have a fixed width (200px), because it has text in in >> that I want to wrap if that text gets longer (don't want the text in there >> to push that div wider). So, since that has a fixed width, the layout gets >> messed up if I don't set a fixed width for the parent-parent div. Am I being >> unreasonable to expect that I can have a changing width for this div, and >> that they will always keep going ou >> t >> to the right, and keep the scrollbars to always fit to the existing width >> of the images, even as that changes? This will go into a CMS and the client >> will have the freedom to put a lot of images in there, and I want it to work >> at whatever width those images turn out to be. >> >> Thanks in advance, >> Rory >> > Try this: > > #nav_item_container { > > } > > #item { > padding: 0 0 20px 0; > } > > #book_images { > white-space: nowrap; > } > > #book_images img { > padding-right: 10px; > } > > -- > Peter Abramowicz > Arachne Web Designs > 403.990.6016 > www.arachne-design.com
Peter, thank you for this solution. It works perfectly. Now I just have to ask: How are the photos in #book_images being aligned to the bottom of the div? I don't understand what makes that happen. There doesn't seem to be any rule for that. I am mystified! A new question for everyone! On this page: http://rorybernstein.com/francesca_proto/book1.html The text in the left nav that is contained in <span class="small"> is not getting as small as I want it (this the black text starting with "The Portraits of Francisco Clemente..."). This is the CSS for .small: .small {font-size: 0.8em;} But I can't seem to get it go go any smaller. The rule works when I make the text bigger. Is there some sort of "floor" to font-size that won't let me make it smaller? Thanks for your help with the horizontal div problem; much, much appreciated! Rory ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
