On Wed, Mar 17, 2010 at 8:33 PM, Rory Bernstein <r...@rorybernstein.com> wrote:
> Next, on this page:
> http://rorybernstein.com/francesca_proto/section_landing.html
>
> The div with the id of  "thumbnail_grid" has a float:left rule.
> Shouldn't it sit alongside the div "nav", and not under it? Why is it
> under it? I want the grid to sit to the right of the nav list. And, I
> can't figure out why the photos don't line up in neat rows/columns.
> Why is the grid irregular?

The grid is irregular because the images are not the same height.
If you make the images the same height then the irregular stuff should go away.

To fix the nav and thumbnail_grid you can do the following.....

But first a word of disclaimer. I have learned css by doing tutorials
and hacking around until stuff works. So, my background is not
exhaustive. I am looking forward to other answers to this question.
However, to just get the darn thing working so you can move on with
your life you have a few options.

Basically, as far as I know, the problem is you declare the width to be 100%
If you give the width a value less than 100% it will work.

You can either work with px or %
If you choose px, then you should create a wrapper div that surrounds
both the nav  and the grig. Give this wrapper a width equal to the
total width you want to use.
Then give the grid a width = wrapper - nav.

If you choose %, convert the 200px of the nav div to 20% or 25% or
??%, then make the grid 80% or 75%, etc.

There is a possible issue with margin, padding, width combining
differently in different browsers. So you might have to leave wiggle
room in the widths.

Hopefully someone with a broader background will clue us both in on this issue.

But, in the mean time get your width down and things will work better.

Regards,
Claude Needham
______________________________________________________________________
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/

Reply via email to