Hi there...

Is it possible to position a child element relatively to a floated parent element?

Link to page: link text

I want to have the girl always positioned in the bottom left corner and the logo in the top left one. That is even already working neatly. Then however the content box is supposed to be placed to the right and should be sized so that the height is a 100% of the whole viewport and the width goes from the right border up to the picture of the girl.

Someone got an idea how this could work?

How it is supposed to look I've tried to show in the picture attached. If something is unclear, I'll be glad to explain it a different way. I'm sorry for my bad English.

Greetings, didb

Picture: alt text

3 answers

2
points
This was chosen as the best answer

Absolutely position (or position:fixed) the logo, have the girl as a background image on the body (or a 100% high wrapper) positioned bottom:0; left:0; and have the content box as a 100% high div, margined as far from the left as it needs to be to let the girl show through. For the gradient and rounded corners, either use CSS3 or compromise with nested divs and appropriate background images.

something like:

http://www.boldfishdev.com/7hb/

Answered over 6 years ago by Tony Crockford
  • Wow. Perfect ... almost exactly what I wanted :) ... Thank you so much! This is just great. Daniel W over 6 years ago
  • I fixed everything but one thing: If there is more text than what would fit in the height of a 100% box, then it starts to go over the box. http://menschenbilder.bplaced.net/start/index_bio.html Daniel W over 6 years ago
  • you could try min-height:100% and then extra content would grow the box. use the fast min-height hack: #wrapper { min-height:100%; height:auto !important; height:100%; } (not tested yet) Tony Crockford over 6 years ago
  • Actually, that doesn't seem to make a difference at all. Daniel W over 6 years ago
0
points

jquery can help you out in positioning the girl to the bottom CMMS Software For More Information: http://www.nexgenam.com/

Answered over 6 years ago by WebCMMS
-1
points

You can use the jQueryUI frameworks position utility http://jqueryui.com/demos/position/ to accomplish this.

Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

You do not need to include the whole jqueryui framework just the position utility and jquery 1.4.*

Answered over 6 years ago by macarthy