Position absolut gibt Eltern keine Höhe

Question

Ich habe zwei div s in einem Elternteil div. Sie machen nebeneinander

<image><info> 

aber auf kleineren Bildschirmen ich sie wollen untereinander und Swap-Positionen zu machen, wie

<info> 
<image> 

So, ihre wirkliche Ordnung in html ist

<info> 
<image> 

und sie haben beide float:right, so dass sie vertauscht und nebeneinander angezeigt werden. Auf kleineren Bildschirmen haben beide float:none und sie scheinen untereinander so wie sie sollten. Ich benutzte Shlomis Antwort von here und es funktioniert gut.

Das Problem.

Wenn horizontal, möchte ich die div s auf der linken Seite ausrichten, aber aufgrund der float:right, richten sie rechts aus.

Also dachte ich, ich den Behälter geben position:relative und die Kinder position:absolute, so ist, dann kann ich left:0; und right:0 tun. Dadurch wird der Container auf Null gesetzt und eine vertikale Bildlaufleiste wird angezeigt. Wenn ich das position:absolute sein zurück zu normalem, aber nicht linksbündig entferne.

Also entweder kann ich position:absolute verwenden und Container Höhe oder meine Lösung ist dumm und vielleicht schlagen Sie etwas anderes vor.

Mein Code jetzt

#container{ 
    width: 100%; 
    height: auto; 
    display: block; 
    margin-top: 30px ; 
    padding-bottom: 38px; 
    clear: both; 
    overflow: auto; 
    position: relative; 
} 

#image{ 
    display: block; 
    height: 221px; 
    width : auto; 
    float: right; 
    margin-right: 20px; 
    position: absolute; 
    clear: both; 
    overflow: auto; 
} 

#info{ 
    width:-moz-calc(100% - 331px);width: -webkit-calc(100% - 331px);width: calc(90% - 331px);  
    height: 500px; 
    display: block; 
    float: right; 
    position: absolute; 
    clear: both; 
    overflow: auto; 
} 

Answer 1

Sie könnten

float: left; 

stattdessen verwenden :)

Hier ist die Geige von Shlomi aktualisiert:

https://jsfiddle.net/sk99xqdd/4/

Ich bin mir nicht sicher, ob es deine Frage beantwortet ...