I need your help.
It seems that my child divs, (the textarea and text) expand beyond the border:
This is the desired result:
Here is the HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
}
</style>
</head>
<body>
<div id="one">
<div id="two">text to the right</div>
<div id="three"><textarea id="field"></textarea>
</div>
</body>
</html>
Borders and padding on textarea are your problem.
Two choices
Both choices are related to textarea's CSS. And as you can see from code below I've also added relative positioning to #one, just to make sure it'll work in the context of your page, so textarea's width will actually be sized by this container.
set proper box-sizing so borders and padding will be included (JSFiddle):
#one {
width: 800px;
border: 1px solid red;
position: relative;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
box-sizing: border-box;
/* let's also add these for cross-browser safety */
border-width: 1px;
padding: 2px;
}
set width to less than 100% (JSFiddle)
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
/* (1px border + 2px padding) × 2 for left and right side */
width: calc(100% - 6px);
}
Borders and padding are added onto the width. since your width is 100% it adds the padding and border onto the field.
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding.
if you subtract the some space off of 'three' you can achieve this.
#three {
width:794px;
}
example
The following should work with most browsers as well.
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
Otherwise you can remove the border and padding from the textarea. There are quite a few ways to do this to be honest.
The reason for it to go beyond the border is that, it is taking border:2px;
You set width: 100% for the #field textarea. By default, a textarea also has non-zero values for border and padding. So after all your textarea is 800px wide(inherited from .three) + 4px border + 2px border = 806px all together (but it might differ slighty, depending on browser you use).
Modify CSS for #field to this
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
I also set margin: 0 just to be sure that some browsers won't have it set to non-zero value.
the classic box model adds up width with margin, padding and border.
In this case, set your textarea another way of calculating width, i.e. box-sizing to border-box (width is proper width, without margin, padding and border)
#field {
width: 100%;
-webkit-box-sizing:border-box;
}
(you might add desired perfixes, -moz, -ms, -o…)
Related
I'm trying to make a box 100% height of the page. But in both Chrome and IE, the following extends a few pixels off the bottom of the page so I have to scroll. Why? Why is there a scrollbar here?
<!doctype html>
<html >
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
div {
border:5px solid black;
height: 100%;
}
</style>
</head>
<body >
<div >This flows a few pixels off the bottom of the page</div>
</body>
</html>
It goes a few pixels off the page because you're including a 5px border. The body of the div is 100% the height of the page, but the border sits outside of that, adding 10px total height to the page alongside the 100% height. So, on a 1000px page the height of your div will be 1010px. Remove the border and it'll be exactly the right height.
div {
height: 100%;
}
If you still want the border, but not the unwanted extra height you can use the box-sizing: border-box property to place it inside the boundaries of the div
div {
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
...and here is another alternative for you :
html,body
{
height:100%;
margin:0;
padding:0
}
div
{
border:5px solid black;
display:block;
height:-moz-calc(100% - 10px);
height:-webkit-calc(100% - 10px);
height:calc(100% - 10px);
width:calc(100% - 10px)
}
Enjoy!
You can keep your current settings WITH 5px border by declare border-box property for all major browsers:
div
{
height:100%;
box-sizing:border-box !important;
-moz-box-sizing:border-box !important;
-webkit-box-sizing:border-box !important;
}
Since you are dealing with 100% div size it's highly recommended to add the !important so you won't get any conflict with other properties.
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I have this HTML
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
<div class="container_1">
<div class="container_2">
Content 1
</div>
<div class="container_2">
Content 2
</div>
</div>
Fiddle http://jsfiddle.net/uZVnB/3/
The problem is that as you see in fiddle the border of .container_1 overlaps the border to the border of .container_2 , so is any form that show complete the border of both containers
Remove float & width from
.container_2. Write like this:
.container_2
{
border: 5px solid red;
}
Check this http://jsfiddle.net/uZVnB/4/
Change the width of .container_2 from 100% to 98%, and everything will be fine. When you set its width to 100%, naturally, it will expand to the maximum, and the borders will overlap.
Remove float: left and width: 100%, since block element fills the entire width of its container, it works fine.
If you have to use float: left style (although I don't think it is required since you have a width: 100% which makes float not behaving as it is defined), you could use box-sizing: border-box, but it only works for mordern browsers, lower version of IE does not support this property.
You may also use position: absolute; left: 0; right: 0; to absolutely position it, but it also conflicts with float: left style and IE6 does not support it.
You can achieve it by using CSS attribute box-sizing:border-box;
SEE DEMO
CSS:
.container_1 {
width:80%;
border:1em solid;
overflow: hidden;
}
.container_2 {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
}
Considering IE in mind, here is my solution.
The border will always be extra than the 100% width.
Here is the solution http://jsfiddle.net/uZVnB/41/
Hope this helps
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}