4 replies [Last post]
farmgeek
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2006-04-27
Posts: 5
Points: 0

I am setting up a template for a friend that wants an image on the bottom right edge of her container div, regardless of the amount of text she puts on an individual page. It needs to float with the text wrapping top and left and the bottom of the image flush with the div border. Silly me thought vertical-align: bottom would work but nope.
I have included the css and html
Any assistance is appreciated.

body { background-color: #000; background-image: url(images/sacred_01.jpg); background-repeat: no-repeat; }

#nav {
float: left;
width: 148px;
margin-left: 0px;
margin-top: 0px;
padding-top: 155px;
}

#navlist {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
}
/* Sets the green border around the logo and content*/
#container {
margin-left: 155px;
text-align: left;
color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 2px solid #669966; /*this forms the expanding green box */
line-height: 115%;
padding-top: 125px;
width: 700px;
vertical-align: bottom;
}
#footer{
clear: both;
margin-left: 155px;
width: 768px;
text-align: left;
color: #696;
font-size: 10px;
}
p{
margin-left: 10px;
margin-right: 10px;
}

.floatimgrightbottom {
float:right;
margin:10px, 0px, 10px, 10px;
vertical-align: bottom;
}
html

Sacred Sexuality Teachers, Tantra Instructors, healing sensual massage and erotic education

#navlist a {
float: left;
clear: both;
width: 100%;
}

#navlist a {height: 1%;}

Could there be more to your erotic life?
Do you wonder what 'sacred sexuality' is all about?
Are you seeking a guide on the path of Eros?
Welcome!

You are. . .

  • Curious XXXXXXXXXXXXXXXXXXXXX
  • Seeking XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • Asking XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • A woman seeking the goddess in yourself (maybe even the X goddess!)
  • XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • Just wanting more fun in the goddess temple of your own bedroom!
Sacred Eros Home Lilies

We are . . .

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.

We welcome women, men and couples of all persuasions.

Welcome to our directory of teachers, articles and resources.

What is XXXXXXh2>

Eros - Eros is the creative force that flows through all things living, including our bodies. Eros drives us to grow, create, heal and love. Eros invites us to open up our senses, to touch the world, to savor each moment. It is rich and juicy, unpredictable, heart-breaking and life-creating.

Sacred - Calling something sacred helps us see it with new eyes. It invites us out of our day-to-day thinking, and opens our eyes to the power of the thing to move us, to take us into meaning, to open our hearts, to enrich our lives.

How could Eros be anything but sacred? Yet it is often misunderstood. Calling Eros sacred reminds us to respect our selves, and to use our energy to grow, heal and love.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's not clear from your

It's not clear from your code which is the image to be aligned, but one method would be to give the element to which you're aligning the image to the bottom of position: relative and then give the image position: absolute; bottom: 0 and left or right: 0.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

farmgeek
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2006-04-27
Posts: 5
Points: 0

Still doesn't work, image needs to float

The line is Sacred Eros Home Lilies, right now it appears after the list. The image needs to float within the div container so the text wraps around it to the top and left. The image needs to be flush against the bottom and right of the div box. If I use position absolute, the text won't wrap and the image obscures the text.

Any other suggestions would be most appreciated.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Maybe you could combine

Maybe you could combine position: absolute with something like CSS sandbags.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

farmgeek
Offline
newbie
Last seen: 13 years 5 weeks ago
Joined: 2006-04-27
Posts: 5
Points: 0

still looking for an easier modular means to bottom align image

hmm
nice but I think that is too complicated for them. They use different pictures on the pages and want to be able to switch them out easily. Here is a prototype for one of the pages. This particular page has a left bottom aligned image vs a right aligned image but demonstrates the issue.
http://70.87.13.10/~sacred/images/proto.jpg