On Apr 25, 2009, at 11:56 AM, phidlerw...@gmail.com wrote:
> I'm obviously doing something wrong(ly):
>
> I want a background image to appear in the lower left of a div, so
> I've styled it so:
>
> #page
> {
> width: 939px;
> margin: 0 auto;
> min-height: 650px;
> background-image: url(images/zengrass40.gif);
> background-repeat: no-repeat;
> background-position: 0% 100%;
> }
>
> But it appears in the top left of the div. I'd like it at the bottom.
Oh, but the image is at the bottom of the div#page :-)
Ad a bottom border to that div, and you'll see it.
The problem you have is: the main content of that div#page is inside a
floated block (div#content). That div does NOT contribute to the
height of div#page because it is floated (that is the correct
behaviour: floated elements are removed from the flow).
I don't see any good reason why you float that div#content. Just give
some appropriate margins and you should be set.
Otherwise, you'll have to look up at 'containing floats'.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
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/
