CODEWITHSUNDEEP
javascripthtmlcsscss-floatoverflow
nat1707828
nat1707828

Reputation: 947

Table no longer appending properly with overflow:auto and floated container below

Basically I have a container that holds a table which uses javascript to append data into the table at a regular interval. With this, the container has a style properly overflow:auto to allow for it to accommodate a larger amount of data without it looking ugly.

This worked fine, until I placed another container below it with the property float:left;. Now the table only displays the first appended item. If I inspect the element, I can 'see' the other appended data items in the code, and a few more appear on the page but nothing like the full table.

If I remove the overflow:auto property from the div containing the table, it works (the data will print down the page going 'outside' the container). If I remove the float:left; property from the container below it also works. What is preventing them working together?

UPDATE: Instead of using float:left on the lower container I added a clearing div so that it would slot in underneath without needing to use float. The issue still remains though, so it seems there is a problem with the container being positioned underneath in general.

Code is below. 'data' is the container with the table, 'download' is the container lying below. If it matters, the javascript is added below.

<div id="data">
    <table id="data_table">
    </table>
</div>
<div id="download"></div>

Stylesheet:

#data {
    float: left;
    width: 192px;
    height: 400px;
    border: 2px solid black;
    overflow: auto;
}

#data_table {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}

#data_table td {
    border: 1px solid black;
    width: 50px;
}

#download {
    width:900px;
    float:left;
    height: 75px;
    border: 2px solid black;
}

Javascript: (if somehow related)

$('#data_table').append('<tr><td><?php echo $catVarValue;?></td><td><?php echo $measVarValue;?></td></tr>');

}, );

Upvotes: 0

Views: 31

Answers (1)

nat1707828
nat1707828

Reputation: 947

Found a solution to the problem. After trying it in firefox I realised it was a cross-browser issue (as it worked). This led me to:

Strange behavior of "overflow: auto" on Chrome

which provides a solution.

Upvotes: 0

Related Questions