Menu
I can't seem to be able to wrap my mind around this one.
It seems that by adding some padding (padding-left: 3px) to my textarea, and it pushes it right out of my div with the border. Adding some padding for text inside the summary box would be useful as it would be more legible to the user.
Here is the result:
This is what it should look like:
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>
253
Add box-sizing: border-box to #summary so that you can set both width: 100% and left and right padding without the contents spilling over into the container.
box-sizing
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.
For cross-browser compatibility, be sure to include prefixes:
#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;
}
Using box-sizing
You can use box-sizing: border-box;
Check this out: http://codepen.io/gopkar/pen/HiEjn
Without box-sizing
Change the width of your textarea from width: 100% to width: 795px;
Have a look at http://codepen.io/gopkar/pen/csxKowidth = <div-width> - <padding-you-have-given>
35
For some odd reason this solution seems to circumvent 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With