I have divided the screen with many div so they stick one to each other (let say, something like chess-board, but with fields of variable sizes). I set heigth and width using percents (relative to parent container).
Now, when I add border: 1px to the divs, all the layout breaks... I imagine that the border adds 1px to each side, and the solution would be to add some internal border. Can I add somehow such an internal border?
You can use box-sizing: border-box to make the border's width part of the width of the element.
.example {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Browser support.
Use outline property. Unlike the border propperty it does not "add" to the height or width of the elements. However also unlike the border propeerty you can not have left, right, bottom or left individual properties. Although you can have outline-style, outline-width and outline-color properties.
Outline Refrence
You can decrease the percentages by 0.5 making them 49.5% EDIT: Outset won't work, thanks #thirty
Let say, if you have a parent div and many child divs. When you set the height and width as percentages, you'll get them stick to each other. Then when adding border:1px their width will become longer than as it was before. To solve this, I would say that you should have another div after the parent div to prevent resizing width.
Related
how do I have two divs with 50% width side by side and a margin without the second div dropping underneath the first?
Div id style is as follows:
#div3{width:50%; float:left; margin: 2px; background-color:yellow;}
Thanks,
Dan
50% + 50% + margins > 100%
Therefore, the elements wrap. You will need to adjust the width or the margins to stay within the 100% limit.
#div3{width:48%; float:left; margin: 1%; background-color:yellow;}
hows that?
You need to change the width of divs to less than 50% because together they have 50% + 50% + 4x margin 2px. Try to change it to an exact value in pixels or f.e. 49%.
The margin will give extra width to the div elements.
You could try setting the divs to 49% each and giving each div a margin auto.
This will centralise the divs and still give you a small amount of margin dependant on the browsers size.
I always cheated and set them both at 49% width, and then added padding (not a margin). But you want some visual colorblocking, right? If you want one to have a background and one to be no background (relative to the rest of the page) set the yellow one at 50%, and the no-color background one at 49%.
You could look into using the new box-sizing property which subtracts the padding from the width instead of adding it on top like you are experiencing:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Most browsers don't support the entire spec yet but it can accomplish what you want: http://caniuse.com/#search=box-sizing.
Though I believe that you would have to use padding instead of margin to create the spacing.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I have a grid of tiles, what I want to be able to do is hover a tile and add a 3px border and keep the tile positioned correctly without disrupting the other tiles around it. At the moment I'm not completely sure how this can be achieved? Can this be achieved using floats or would I have to absolutely position each of the tiles and then increase the z-index of the hovered tile so it stands out above the rest?
Also the tile dimensions have to remain the same and the border has to be outside the tile and not inset.
Fiddle here: http://jsfiddle.net/Z7TwF/
On the :hover selector you need to remove the combined width of the borders:
li:hover{border:3px solid #f00; width: 44px; height: 44px;}
When you add a border to an element, it increases its dimensions. So when you hover the element, removing the combined width of the borders on the dimension attributes will fix the issue.
http://jsfiddle.net/Z7TwF/2/
Another solution is to change the box-sizing method:
li
{
box-sizing: border-box;
}
This in essence tells the browser to calculate the width of the borders in with the width of the element, preventing the offset you had in your original example.
http://jsfiddle.net/Z7TwF/3/
Why don't we have box-sizing: margin-box;? Usually when we put box-sizing: border-box; in our style sheets we really mean the former.
Example:
Let's say I have a 2 column page layout. Both columns have a width of 50%, but they look kind of ugly because there's no gutter (gap in the middle); Below is the CSS:
.col2 {
width: 50%;
float: left;
}
To apply a gutter you might think we could just set a right margin on the first of the 2 columns; something like this:
.col2:first-child {
margin-right: 24px;
}
But this would make the second column wrap onto a new line, because the following is true:
50% + 50% + 24px > 100%
box-sizing: margin-box; would solve this issue by including margin in the calculated width of the element. I would find this very useful if not more useful than box-sizing: border-box;.
Couldn't you use width: calc(50% - 24px); for your cols? Then set your margins.
I think we could have a box-sizing: margin-box. The css box model shows exactly, what are the positions of the margins of the frames.
There are minor problems - for example, the margin boxes can overlap - but they aren't hard to solve.
I think, the situation is the same, as we can see with the overflow-x & overflow-y combinations, with the absolut positionied divs in table-cells, with the combination of min|max-width|height with the box-sizing, and so on.
There are features, really simple features, which the browser developers simply doesn't develop.
IMHO, box-sizing: margin-box were a very useful feature. Another useful feature were the box-sizing: padding-box, it exists at least in the standard, but it wasn't implemented in any of the major browsers. Not even in the newest chrome!
Note: #Oriol 's comment: Firefox did implement box-sizing: padding-box. But others didn't, and it was removed from the spec. Firefox will remove it in version 50. Sad.
The guy at the top is asking about adding margin to the overall width, including padding and border. The thing is, margin is applied outside the box and padding and border aren't, when using border-box.
I have tried to achieve the border-margin idea. What I have found is that if using margin you can either add a class of .last to the last item (with margin, then apply a margin of zero, or use :last-child/:last-of-type). Or add equal margins all the way around (similar to the padding version above).
See examples here: http://codepen.io/mofeenster/pen/Anidc
border-box calculates the width of the element + its padding + its border as the total width. So if you have 2 divs which are 50% wide, they will be adjacent. If you add 8px padding to them, then you will have a gutter of 16px. Combine that with a wrapping element - which also has padding of 8px - you will have a nicely laid out grid with equal gutters all the way around.
See this example here: http://codepen.io/mofeenster/pen/vGgje
The latter is my favourite method.
I'm sure all of this is obvious, but I'll type it out anyway because...well, I need the exercise. Would the following outcome not be just as efficient as box-sizing: margin-box;:
.col2 {
width: 45%;
height: 90%;
margin: 5% 2.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
http://jsfiddle.net/Fg3hg/
box-sizing is used to control from which point the padding and border are assessed to the overall size of the element. So while it's not kosher to include px margins with a % width (as is usually always the case), it's easier to calculate what the relative percentage amount should be because you don't have to incorporate padding and borders to the defined width.
This is because the box-sizing attribute refers to the size of an element after computing the given dimension-specific values (padding, borders). "box-sizing: border-box" sets the height/width of an element and takes into consideration the padding as well as the border width. The scope of an element's margin is greater than the element itself, meaning it modifies the flow of the page and its surrounding elements, therefore directly altering the way the element fits within its parent relative to its sibling elements. Ultimately a "margin-box" attribute value would cause major problems and is essentially the same as setting the elements height/width directly.
Dimensions of block-level, non-replaced elements in normal flow must satisfy
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block
When over-constrained, browsers must adjust either the left or right margin.
I think that means the width of the margin box must equal the width of the containing block (i.e. 100%).
For your case, transparent borders with box-sizing: border-box can work much like margins.
On Codrops there are a couple of good articles on the subject of the effect of margins and row's forced to overflow. They suggest using the rem or em unit with a normalizer css setting font size to 100% for all browsers, then when you set widths and margins it is easy to keep track of the effect on the row's width by simply making a note in comments for the total width. A conversion of 16px to 1 em is the way to calculte the targeted viewports total witdh.
Working like that for the dev stage at least and then if you want 'responsive' templates you can convert widths to % including the margin widths.
The other and often simpler way they suggest to handle gutters is to use the pseudo after and the content: ''; on each of your columns which I find works really well. If you set a div class that is the defined last column such as end you can then target that class not to have the pseudo after, or to have a wider one; which ever best suits your layout.
The added bonus of using this pseudo element method is it also gives you a target for shadows that can give a more 3d effect and greater depth to the flat image on the readers monitor as well. I am experimenting with this effect at the moment by scaling up the effects being used on buttons, 'tweaking' the gradients, and the z-index.
Perhaps set the border to 0% opacity using RGBA and use the border as a margin.
There interesting situation when using box-sizing inside body content
no content no border box gives no any value on left-right margin % recount of this two box recount algoritms
.body{
box-sizing: border-box;
margin:0 3%;
}
Firefox versions before 57 also supported the padding-box value for
box-sizing, though this value was been removed from the specification
and later versions of the browser.
So margin-box even not planned...
There should be a box-sizing: margin-box;
But does the following work:
Put a div around it with
.divX{
width: XX%;
display:flex;
align-items: center;
justify-content: center;
}
I have an element within another element. The parent is of a certain size. I want the child to be the exact same size, but at the same time have a padding.
If I don't know the exact size of the parent, is there any way to get it to be the same size as the parent and have a padding?
problem:
http://jsbin.com/odemu3/edit
Thanks.
On supported browsers, set box-sizing to border-box (CSS3 only). This causes the browser to calculate the width of an element as content + padding + border + margin (as opposed to content-box in the CSS1/2 box model):
input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I believe inputs already have this setting by default, but this can also apply to any other child elements whose widths you want calculated like that.
Make the child element display:block (which will cause it to fill the width of the parent) and either give the parent padding or give the child a margin. Do not try to specify a width on the child element.
Unfortunately, no. Width calculations are done before any padding/margins are taken into account, so a child with width 100% will be 100% of the parent's, after which margins/padding are added, so you'll end up with something over 100%.
You can fake the effect by putting on a border of the same color as the background. This would work, since you've got a solid background for the child to span over.
Not a perfect solution but it worked
Remove left and right padding padding:20px 0; and set text-indent:20px; on input
http://jsbin.com/aleta4/2/edit
block-sizing: border-box didn't work for my particular problem but there is another way for those coming back to this question:
use position: absolute along with right:0 (or bottom for vertical constraints) to constrain the child to the parent. The parent element should have position: relative and it is forced to fit perfectly.