CSS How to make DIV Border Dynamic in Width

html css image html-table

13,027

Solution 1

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%;
}

Solution 2

give :

table{width:100%;}

as well as

#main
{
width: 100%; /*not auto*/
 /*remaining css */
}

that would solve your problem

so, final css :

html, body {
    width:100%; /* important */
    height:100%; /* important */
    margin:0;
    padding:0;
}
#main {
    width: 100%; /* changed*/
    height: auto;
    padding: 2px 0px 0px 0px;
    border: 3px solid #ccc;
}
table{
    width:100%; /* changed*/
    height:auto;
    border-collapse: collapse; /* added and very important*/
    table-layout: fixed;/* added and very important*/
}
img{
    width:auto; /* change as per your need */
    max-width: 100%;
    height:auto; /* important to maintain aspect ratio of images */
}

~~your problem~~

solution demo

13,027

Author by

Azeem

I am CRM Technical Consultant with expertise working with Dynamics CRM for over 4 years. I have worked on several projects and implemented Sales, Marketing, and Service modules in Dynamics CRM 2011/2013/2015/2016/Dynamics 365. I worked for corporate banks and insurance clients.

Updated on June 04, 2022

Comments

Azeem almost 2 years
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?
NoobEditor over 10 years

and what if images are 500 x 500 px??
Mr. Alien over 10 years

I guess they think you copied the solution, so may be? though not the downvoter...
Krish over 10 years

#main { width: auto; height: auto; margin: auto; padding: 2px 0px 0px 0px; border: 3px solid #ccc; } #main table img{width:500px;height:500px}
NoobEditor over 10 years

@Era : mate...i owe you big time...we are new bff's!! :D
Azeem over 10 years

this seems not right bcz it squeezes pictures on adding more. It does not expand the control width... What I want is to expand control horizontal width and border on adding more pictures... not compressing already uploaded ones...
richa over 10 years

thanks for tagging friends.. :) are we neighbors Mr.Alien .. ?
Mr. Alien over 10 years

@NidaSulheri They will scale proportionally, I've not assigned any fixed width on the img tag
Azeem over 10 years

Horizontal scroll bar never appears and it squeezes pictures to fit them in page :(
Mr. Alien over 10 years

@NidaSulheri so you want the horizontal scroll bar to appear?
Azeem over 10 years

yes... and it was appearing when images were dropping outside of the DIV. I want: 1. DIV border should expand itself with respect to images in it NOT to compress images to fit in visible page layout. 2. Thus it should add horizontal scrollbar when images are more than the visible portion of page.
Mr. Alien over 10 years

@NidaSulheri You should have mentioned this to me before :) here you go - jsfiddle.net/9xp6G/2
Azeem over 10 years

That seems to be working. Also, this snippet have also solved my issue: #main { width: 100%; height: auto; margin: auto; padding: 2px 0px 0px 0px; border: 1px solid #ccc; display:table; float: left; } However, I mark your answer correct. Thanks for your effort :)