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>

score 0 · Answer 1 · answered Oct 12 '15 at 15:49

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. 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>

You probably misunderstood my question: I want to image to be aligned to the bottom-right corner, just as in my example, so that it overlaps the white-space *below* the closing X. That's what I used `absolute` for. Could you edit your answer - if it's possible at all? — membersound, Oct 12 '15 at 19:36
Ah, indeed, you mistyped "blank space on the left". I don't think you can do what you want with CSS, or at least it's beyond me. The HTML you control is in a wrapper controlled by Google, so there's no positioning we can sneak onto it to draw it right. With absolute positioning, there are a [couple](http://stackoverflow.com/questions/8184919/css-relative-positioned-parent-div-not-stretching-to-absolute-child-div-height) [answers](http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children) using JavaScript if you can reliably get at the map elements. — Kristján, Oct 13 '15 at 00:05

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

1 Answers1