user1783398 user1783398 - 4 months ago 8
HTML Question

position div, iframe and scrollable div

I am trying to position 2

div
s and an
iframe
. I want the first
div
and the
iframe
to be horizontally positioned, then the 2nd
div
underneath. The 2nd
div
should be a scrollable. I have the following HTML code that does not seem to work. All elements are horizontally floating, and the 2nd
div
is not scrollable. Could I get some suggestions please? Thanks!

https://fiddle.jshell.net/f9L4nny6/



#wrapper div#input, iframe {
float: left;
}
div#log{
float:left;
}

<body>
<div id="wrapper">
<div id="input">input form here
</div>
<iframe id="preview"></iframe>
</div>
<div id="log" style="overflow-y: scroll; height:400px; float:bottom">Log will be shown here</div>
</body>




Answer

float:bottom does not exist . use float:left;clear:both instead on #log

see bellow

#wrapper div#input, iframe {
    float: left;
}
div.log{
    float:left;
}
<body>
    <div id="wrapper">
      <div id="input">input form here
      </div>
      <iframe id="preview"></iframe>
    </div>
    <div id="log" style="overflow-y: scroll; height:400px; float:left;clear:both">Log will be shown here</div>
</body>

Comments