Sent by Rory Bernstein on 19 March 2010 15:03
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 [EMAIL-REMOVED]]
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/
