Check out how far have I got it here: [link was removed] How can I make the textarea above the green button to fill the div block? I mean, how to make the textarea exactly the same width as the comment block?
2 Answers
Please refer to this article which implements the CSS3 box-sizing property http://css-tricks.com/box-sizing/
A quick solution for this is to set
textarea { width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } And here is a working example which implements the box-sizing property http://css-tricks.com/examples/BoxSizing/
Using widths like 99% or somewhat lesser to adjust within the container div, has already been discouraged.
4 Comments
Vinz
Nice and clean solution, Thanks! BUT "Support IE8+: box-sizing"... Mind that I wrote the above answer two years ago when IE8 was the latest version. And even now you might still have a lot of users running XP+IE6 depending on your customers.
acpmasquerade
@Vinz, its true with your concern. However, I believe "Using a old browser is to suffer on your own". If IE doesn't support, then its IE's problem, why should it be our problem :) -
acpmasquerade
@Vinz, I am not sure on how you feel about it, but "Bootstrap" from twitter is a awesome platform to start on interface for the modern days, and it would be better if we try to import features from these heavily optimized platforms.
ahnbizcad
Also note you usually want to use
min-width: 100%; max-width: 100%; so that it adjusts as you resize the window, but doesn't remain a larger or smaller size than the width of your window. Having width: 100%; only sets the textarea to 100% initially, but users resizing it can ruin the layout and sizing of the textbox, which I assume most people want to prevent most of the time.Dimensioning textareas in percents has somehow never worked properly, I had the same problem years ago and ended up using width: 99%....
I suggest you use a div around the textarea to draw the rounded border and remove the border on the textarea itself. This way the width of the textarea doesn't need to be exact, you could use 98% or 99%.
1 Comment
Rihards
Oh, well - check the link. It worked out pretty good, but still I'm wondering maybe someone knows a way how to make dimensioning textareas in percents properly in my case?
width: 100%width: 100%causes it to overflow. You could just set the width to 488px, which is the width of your other boxes. I've not checked to see why it overflows though - fixing that might be a better solution.padding. Forcing adisplay: blockon it doesn't work either, neither doeswidth: auto(which should force a block level element into taking up the full width without overflowing). Good question - I would usually end up using pixel widths, but would be interested to see a solution.