Question 245403 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make a container that can resize?

How can I make a container that can resize? I want to make a archive of iso files. But when I configure the CSS styles doesn’t change the size of the container.

The problem is the height of the .container

The HTML & CSS code below:

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body
        {
            font: 13px Verdana, Arial, Helvetica, sans-serif;
            background: #000;
        }

        H1, H2, H3,
        H4, H5, H6
        {
            font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        }

        a {
            text-decoration: none;
        }

        a:hover
        {
            text-decoration: underline;
        }

        table
        {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 550px;
            background-color: #FFF;
        }

        td, th
        {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        .container
        {
            position: relative;
            padding: 15px;
            
            border-radius: 5px;
            background-color: #FFF;

            margin: 0 auto;
            top: 90px;
            
            height: 100%;
            width: 50%;
        }
<div class="container">
        <center>
            <table>
                <tbody><tr>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Date</th>
                </tr>
                <tr>
                    <th><a href="#">MS-DOS 6.22</a></th>
                    <th>1.4M</th>
                    <th></th>
                </tr>
            </tbody></table>
        </center>
    </div>

I tried to delete some parts of the code but i doesn’t have good results at all. The container not change the size and keeps static.

Tags:

2

Answers


  1. 0

    In your CSS for .container, change the ‘width’ value to ‘fit-content’. Then the container will resize to fit whatever is in side of it. Currently you have it fixed at 50% of the containing space.

    See this JSFiddle: https://jsfiddle.net/2z1Lypq6/

    The relevant portion is here:

    .container
    {
        position: relative;
        padding: 15px;
        
        border-radius: 5px;
        background-color: #FFF;

        margin: 0 auto;
        top: 90px;
        
        height: 100%;
        width: fit-content;
    }
    Login or Signup to reply.
  2. 0

    What are you expecting?
    I adjusted the container width so it fits inside the container.
    Your table had a fixed width that was causing it to overflow the container.
    Use fit-content to adjust the container width automatically.
    You can also adjust your table width to 100% to fit towards your container size.

    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body
        {
            font: 13px Verdana, Arial, Helvetica, sans-serif;
            background: #000;
        }

        H1, H2, H3,
        H4, H5, H6
        {
            font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        }

        a {
            text-decoration: none;
        }

        a:hover
        {
            text-decoration: underline;
        }

        table
        {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 500px;
            background-color: #FFF;
        }

        td, th
        {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        .container
        {
            position: relative;
            padding: 15px;
            
            border-radius: 5px;
            background-color: #FFF;

            margin: 0 auto;
            top: 90px;
            
            height: 100%;
            width: fit-content;
        }
    <div class="container">
        <center>
            <table>
                <tbody><tr>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Date</th>
                </tr>
                <tr>
                    <th><a href="#">MS-DOS 6.22</a></th>
                    <th>1.4M</th>
                    <th></th>
                </tr>
            </tbody></table>
        </center>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search