How to align image next to text expanding parent div to full height?

Question

I want to create an InfoWindow on a google maps view: http://jsfiddle.net/q6tf9kp6/2/

What I want: the (dynamic) image should start below the headline, and the box should expand automatically so that the full image fits in

(without having to explicitly pre-define the height of the box in CSS, as the image will by supplied dynamically and thus size is not known beforehand).

Is that possible?

The main problem here is that I have to use position:absolute for the image to overlap the "close button div" from google maps. Otherwise there would always be a white blank space on the left.

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <script type="text/javascript"> function initialize() { var loc, map, marker, infobox; loc = new google.maps.LatLng(-33.890542, 151.274856); map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: loc, mapTypeId: google.maps.MapTypeId.ROADMAP }); marker = new google.maps.Marker({ map: map, position: loc, visible: true }); var infobox = new google.maps.InfoWindow({ content: document.getElementById("infobox"), maxWidth: 300 }); google.maps.event.addListener(marker, 'click', function() { infobox.open(map, this); map.panTo(loc); }); infobox.open(map, marker); } google.maps.event.addDomListener(window, 'load', initialize); </script> <div id="map" style="width: 100%; height: 300px"></div> <br> <div class="infobox-wrapper"> <div id="infobox"> <h4>Some long headlineeeeeeeeeeeee</h4> <div style="float:left"> <div style="display:inline-block"> <div>Name1</div> <div>Name2</div> </div> <div style="display:inline-block; position:absolute; bottom: 2px; right:2px;"> <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg"/> </div> </div> </div> </div> 

Answer 1

Using position: absolute removes your image from the normal flow, preventing its container from calculating height properly. First, you can significantly simplify your infobox contents and put the image where you want with a float: right . You didn't specify quite where you want everything, but this seems reasonable to me:

<h4>Some long headlineeeeeeeeeeeee</h4>
<div>
  <div style="float:right">
    <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg" />
  </div>
  <div>
    <div>Name1</div>
    <div>Name2</div>
  </div>
</div>

Then, if you don't want the whitespace to the left of the close button, you can hoist the whole content up with position: relative; top: -17px position: relative; top: -17px . I picked -17 to align the text baseline with the closing X .

<div class="infobox-wrapper">
  <div id="infobox" style="position:relative; top:-17px">
    <h4>Some long headlineeeeeeeeeeeee</h4>

---

Here it is in action:

 function initialize() { var loc, map, marker, infobox; loc = new google.maps.LatLng(-33.890542, 151.274856); map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: loc, mapTypeId: google.maps.MapTypeId.ROADMAP }); marker = new google.maps.Marker({ map: map, position: loc, visible: true }); var infobox = new google.maps.InfoWindow({ content: document.getElementById("infobox"), maxWidth: 300 }); google.maps.event.addListener(marker, 'click', function() { infobox.open(map, this); map.panTo(loc); }); infobox.open(map, marker); } google.maps.event.addDomListener(window, 'load', initialize); 

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <div id="map" style="width: 100%; height: 300px"></div> <br> <div class="infobox-wrapper"> <div id="infobox" style="position:relative; top:-17px"> <h4>Some long headlineeeeeeeeeeeee</h4> <div> <div style="float:right"> <img src="http://www.4homejendrny.de/hintergruende/hell/hg009.jpg" /> </div> <div> <div>Name1</div> <div>Name2</div> </div> </div> </div> </div>