I have a simple div in which I have 2 textarea. I set the textarea's width to 100% but then it just go a little out of the div.
See this fiddle.
HTML:
<div class="offer_a_help">
<textarea></textarea>
<br/>
<textarea></textarea>
</div>
CSS:
.offer_a_help {
width: 350px;
height: 250px;
position: absolute;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border-radius: 5px;
border: 1px solid #bbb;
}
.offer_a_help textarea {
width: 100%;
}
Why is that happening and what's the simplest way to fix this?
I believe it may be an issue with the textarea having either a border or padding. Both of those would be calculated with the 100% width and cause the width to be wider than the container.
You can add border-box to make the padding and border be calculated WITH the width instead of IN ADDITION to
Try adding:
.offer_a_help textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You need to reset padding and margin (I've set margin to -1 to accomodate outer div border):
Demo
.offer_a_help textarea {
width: 100%;
margin: 3px -1px;
padding: 0;
}
Change your css to this.
.offer_a_help textarea {
width: 100%;
margin:0;
padding:0;
}
You can also add padding to your .offer_a_help class
http://jsfiddle.net/YE5MP/5/
Related
Width 100% is not working! My footer is going outside the #wrap and I don't want to set exact pixels to it.
Any solution?
live example.
#wrap {
border: 1px solid #ccc;
clear: both;
display: table;
vertical-align: middle;
position: relative;
width: 400px;
margin: 0 auto 10px;
padding: 10px;
}
footer {
clear: both;
background: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
margin: 0;
padding: 10px;
width: 100%;
overflow: auto;
min-height: 100%;
height: auto !important;
}
<div id=wrap>
<footer>© 2013 PUAction · Terms · Disclaimer · Privacy · Login</footer>
</div>
This is the default box-model behavior :
Width = width + padding-left + padding-right + border-left + border-right
Therefore, your width is 100% + 2*10px which is larger than the footer's width...
You can :
Remove width: 100% which will result on an implicit use of width: auto (which is just fine because block elements automatically fill the width of their parent)
Use the box-sizing: border-box properties
For deeper explanations, just take a look at this resource and this one!
Regards.
You're using display:table on the container. That means the direct child (in this case "footer") should be display:table-cell.
When you say width: 100%; that doesn't include the padding, so you have width:100% + padding: 10px that gives you 100% + 20px width.
A simple solution is to add box-sizing: border-box;
footer { box-sizing: border-box; }
Demo
Perfect !
Thanks guys !
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
http://jsfiddle.net/2P6KR/9/
I made a span in a div. This span is only a black border, positioned above the div.
I want this span (black border) adapts to the div width and height. Like a border in interior to this div.
My problem is that border exceed the div : http://jsfiddle.net/QHRYJ/
div {
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
width: inherit;
border: 4px solid;
margin: 10px;
height: inherit;
}
-->-->-->-->
*EDIT : what I want : http://www.hostingpics.net/viewer.php?id=623039div.png*
The comments speak for themselves, however, if you still want to achieve it your way:
div {
position: relative;
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
top:0 ;
left: 0;
right: 0;
bottom: 0;
border: 4px solid;
}
You need to give your parent div a position so its child elements orientate themselves on its parent. Then, as your span is absolutely positioned, you can just expand it by explicitly setting left, right, bottom and top to 0.
If you want to have a spacing between span and div, add margins to the span.
I think you have an XY Problem here.From what you've described in the comments (adding a border to the <div> on hover), you don't need a <span> element for that. You can achieve this using the :hover pseudo-selector. For example:
div:hover {
border: 4px solid #000
}
Here's a jsFiddle Demo
You might want to specify box-sizing on the <div> to prevent it from resizing:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
I'm trying to create a div with 3 divs inside.
.outter
{
right: 100px;
border: 10px solid white;
}
.main
{
overflow: hidden;
width: 100%;
height: 150px;
}
.left
{
float: left;
width: 40%;
height: 100%;
background-color: green;
border-right: 5px solid white;
}
.center
{
float: left;
width: 40%;
height: 100%;
background-color: red;
border-left: 5px solid white;
border-right: 5px solid white;
}
.right
{
float: right;
width: 20%;
height: 100%;
background-color: orange;
border-left: 5px solid white;
}
<div class="outter">
<div class="main">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</div>
This is what I got so far.
-The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px;
-The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.
I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.
Can anyone help me?
Regards,
You can use box-sizing for this. write like this:
.main,
.main >*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this:
http://jsfiddle.net/ubtdT/
You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.
Depending on what browsers you intend to support, you can make use of CSS3's box-sizing property. By setting box-sizing: border-box;, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.
If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:
/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
I've got a bit of a css issue. I'm have a container div with a set size and an absolute position. Inside that I have an element of some kind and a div. the element can be a button or a input in my example. The button follows the rules and is 100% of the container, the input doen't follow the rules and is more than 100% of the container. Whats going on and how do I go about fixing it? jsfiddle - Click either widget to see its bounds.
CSS
.Object
{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
}
.Object .Cover, .Object button, .Object input
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index:0;
}
.Object button
{
padding: 2px;
}
.Object .Cover
{
cursor: move;
z-index:1;
}
HTML
<div class="Object" id="3b089a23-7732-e743-aea4-d9dcef359d4e" name="Unnamed Widget" style="height: 30px; "><div class="Cover"></div><input /></div>
<div class="Object" id="e1bc0640-e049-eda8-05ac-0a99c21c6fe1" name="Unnamed Widget" style="height: 30px; top: 10px; left: 210px; "><div class="Cover"></div><button data-click="">Unnamed Button</button></div>
The 104 px is caused by the box-model. When set to default it will take into account the borders and padding of the element, seeing as an input has default padding and borders (ipx in this case), it added up to 4 and made it "grow" out of its parent.
If you add box-sizing: border-box; to your input selector (I moved it to a standalone selector) and set your own border styles, it works as you desire :)
.Object input
{
box-sizing: border-box;
width: 100%;
height: 100%;
/*border: 0;
padding: 0;*/
border: 1px solid #ccc;
background-color: #eee;
}
http://jsfiddle.net/K5D9z/13/
Hope it helps.
Note: afaik IE6, 7 won't work as expected, but you can just use a conditional comment and set its width/height differently.