CSS How to make DIV Border Dynamic in Width

css, html, html-table, image

Solution

The issue which you are encountering - Demo

And this is what will fix the issue, am doing nothing fancy, I assigned `width: 100%;` to the `table` element, and than am using `table-layout: fixed;` which is important here, and than just use `max-width: 100%;` for your `img` tag... Also make sure you use `width` for your `td` elements as well...

Demo (Fixed issue)

#main {
    width: auto;
    height: auto;
    margin: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc; 
}

img {
    outline: 1px solid #eee;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table tr td {
    width: 33%;
}

table tr td img {
    max-width: 100%;
}

Problem

I am displaying images in HTML control horizontally. The images TABLE is inside main DIV. CSS for DIV is as follows: ``` #main { width: auto; height: auto; margin: auto; padding: 2px 0px 0px 0px; border: 3px solid #ccc; } ``` The problem is that main DIV border is not extending and images are dropping out of it as shown in following screenshot: Here is the HTML scippet: ``` <body> <div id="main"> ... <table> <tr id="image-list"> </tr> </table> ... </body> ``` Please suggest how to alter code so that DIV border automically increase its width as per images in it?

Original source