CODEWITHSUNDEEP
htmlcssfieldset
nano_nano
nano_nano

Reputation: 12523

Width of fieldset issue

I have this html:

<body>
<table align="center" width="50%">
        <tr>
            <td>
                <div id="iconpanel">
                    <img alt="Logo" src="logo.gif">
                    <hr
                        style="border: solid #d3d3d3 1px; height: 3px; background-color: #d3d3d3;">
                    <form>
                        <fieldset id="fieldset">
                            <legend>Personalia:</legend>
                            Name: <input type="text"><br> Email: <input
                                type="text"><br> Date of birth: <input type="text">
                        </fieldset>
                    </form>
                </div>
            </td>
        </tr>
    </table>
    <div id="main"></div>
</body>

together with my css:

    #iconpanel {
    border-radius: 25px;
    border: 2px solid #d3d3d3;
    padding: 20px; 
    width: 100%;
    height: 100%; 
    align: center;
}

#fieldset {
    border-radius: 25px;
    border: 2px solid #d3d3d3;
    padding: 20px; 
    width: 100%;
    height: 100%; 
    align: center;
}

i get this output:

enter image description here

as you can see the width of my fieldset is longer than the parent panel...

That are my first steps with Css. Maybe you can help me find the problem.

Thanks a lot

Stefan

Upvotes: 0

Views: 1388

Answers (1)

Roy
Roy

Reputation: 8069

Add box-sizing: border-box; to #fieldset to get what you want, because now the width of the element will be 100% + 20px of padding on each side.

With box-sizing: border-box; enabled, the CSS wil try to implement the padding inside the set width, so the width is 20px + ? = 100%;

border-box The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.

Read more about box-sizing at Mozilla Developer Network.

Upvotes: 2

Related Questions