Geek Answers Handbook

Adding a pad to the text box pushes the item outside the div

I can't seem to think it over.

It looks like adding a little padding (padding-left: 3px) to my text box and it pops it right out of my div with the border. Adding some add-on for the text inside the dashboard would be useful as it would be more readable for the user.

Here is the result: enter image description here

Here's how it should look: enter image description here

Here is the HTML / CSS markup:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
.fcontent_text {
    font-size: 8.5pt;
    text-align: right;
    color: rgb(11,63,113);
}
#fcontent_container {
    width: 800px;
    display: block;
    position: relative;
    margin: 5px;
}
#fcontent_wrapper {
    border: 1px solid rgb(128,128,128);
}
#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
}
</style>


</head>

<body>
                <div id="fcontent_container">
                    <div class="fcontent_text">Summary</div>
                    <div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
                </div>
</body>

</html>
+4
source share
3 answers

Add box-sizing: border-boxto #summaryso you can set both width: 100%left and right fill without content spilled into the container.

box-sizing

border-box

  • , . , Internet Explorer, Quirks.

:

#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
+7


box-sizing: border-box;
: http://codepen.io/gopkar/pen/HiEjn


width: 100% width: 795px;
http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>

+1

For some odd reason, this solution seems to go around everything and works flawlessly:

<div style="width: 800px">
<div style="text-align: right;">Expand</div>
    <div style="padding-right: 6px;">
        <textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
    </div>
</div>
0
source

More articles:


All Articles