1

I am trying to align a div to the bottom left of the container: enter image description here

The green is the main body container inside . Yellow is the header div, inside which are logo and title.

Now, I got the logo (orange div) to {float:right; width: 30%}, thus the width of the image inside dosen't exceed the div.

The problem is with the blue one. I want it to be of same height as orange (which depends on image) and as fill us rest of the space. (As u can see in the image). Also I want the text of the blue div (title) to be aligned to bottom left.

I tried various position absolute, relative for parent/child and setting the top and bottom. Using fixed height works, but the div needs to be of the same height as the image div.

Any help would be appreciated as I will learn more about css.

EDIT: The width of the image will depend upon boilerplate and the dimensions of the image are not fixed. Title will contain a css formatted <h1> and a <span> for icons.

EDIT2: My current code: http://jsfiddle.net/QxK9U/

Shantanu Thatte
  • 63
  • 1
  • 9
  • 1
    Possible duplicate of: http://stackoverflow.com/questions/5581799/how-to-stretch-div-height-to-fill-parent-div-css – Jan Oct 20 '12 at 03:50
  • Is there any reason you can't just fix the height? I assume you're going to know the dimensions of your logo. I don't see how floating the div and setting it to a percentage width is going to contain the logo when the site is shrunk though. Using a fixed height this should be what you're after no? http://jsfiddle.net/VtxWj/1/ – Rick Calder Oct 20 '12 at 04:18

2 Answers2

1

If you wrap the image div inside the title div then the title div will have the same height, unless it has more content than the image div. 

<div class="header">
    <div class="title">
        <div class="image"><img src="http://placekitten.com/200/250"></div>
    </div>
</div>

http://jsfiddle.net/Gc5qz/1/

Timo
  • 2,740
  • 1
  • 24
  • 22
  • 1
    I also tried that approach but any additional text wraps around the div. So if I put any content in the title div after the image, it just expands wraps to the next line. (http://jsfiddle.net/Gc5qz/5/) – Shantanu Thatte Oct 20 '12 at 11:58
0

Have you tried this css property

bottom:0
left:0

Update:

   position: relative;
Vijaychandar
  • 716
  • 5
  • 21