It seems that when I have a table inside a div and I set the table to 100% width and give it some margin, it seems to disregard the rightside margin. Here is the fiddle for it:
http://jsfiddle.net/gFQGb/
The width applies to the actual content of the element, so you have a table with 100% wide content, and on top of that you add some margins pushing the width over 100%, thus the right side of the table extends beyond the parent's right edge. Probably you should go with padding on the parent instead of margin on the table, or an additional wrapper <div> with just the margin.
just add padding: 10px; to the .inner class and remove margin from the table.
Here is the demo
That's how the CSS default box model works: width of the element (defined via width: x) + borders + margins + padding = total amount of space it takes up.
http://css-tricks.com/the-css-box-model/
You can change the box-model by using box-sizing: border-box, which will cause the width: 100% to include your paddings/borders.
http://css-tricks.com/box-sizing/
Related
I have a full screen web app. I'm using CSS 100% height on HTML, body and parent elements. I have a contents table which grows as items are added to it. I am trying to have a vertical scrollbar automatically appear when there is not enough space.
I have tried using different combinations of overflow-y:auto; overflow:auto; on the tbody, table and the surrounding div (which is also 100% height) but nothing seems to work. Is it even possible with 100% heights? Does overflow require a fixed height?
Edit
Here is some code. The left hand column contains the table to which I'd like to add a vertical scrollbar when there's not enough space.
https://jsfiddle.net/468cpvmv/
Unfortunately, you're using a table in a faux-table which makes it much harder to do this right.
You're setting the fieldset > div to it's inherited height which is the height of the table inside.
If you instead base it off the viewport height, you can get your desired result, specifically using calc. Currently you have 45px of "extra stuff" (padding, headers, etc.) that you want to remove from the calculation, so you can add this declaration:
.page-contents .left-col fieldset > div {
max-height: calc( 100vh - 45px );
overflow-x: auto;
}
Here's a fiddle: https://jsfiddle.net/468cpvmv/9/
These are the heights you want to subtract in your calculation:
Please see example at
http://jsfiddle.net/cne94hw4/
.a{
width: 100%;
background-color: #eee;
margin-left: 200px;
}
I was expecting "width 100%" will mean 100% of the windows, but clearly it's not when I add a margin to it. I found this is difficult to understand.
What's the exact relationship of the box and the margin? It's there any written rule for this?
Your question is about the CSS Box model, which is described in detail at the CSS specification: http://www.w3.org/TR/CSS2/box.html
In brief, the width defines the width of the content box. If you add padding, borders
and margins, then the overall width of the block box is the width of the content box plus
any widths due to padding, borders and margins.
As for the height, padding and border widths are added to the overall heigth of the
block. Margins, though, can collapse with the margins of adjacent blocks, which is
another topic to look at (see: collapsing margins).
Another concept is the block formatting context, which comes into play if you
deal with elements that may be floated or positioned.
In your example, the overall width of the a element is 100% plus 200px due to the
left margin.
Finally, you can have some control over how the width is computed by using the box-sizing property.
width: 100%' does mean100%` of the document your example, but you also set a margin, which is what's limiting the width of the element. See what happens when you remove it.
try the following
.class{
width:100%;
padding-left:200px;
box-sizing:border-box;
}
margin adds extra space out of the box.
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
Unless I completely do not understand the box-sizing property... why aren't those two DIVs next to each other?
http://jsfiddle.net/MK7Fs/
With box-sizing: border-box; shouldn't the padding, margin, and border "cut in" to the 50% width and ultimately end up with 100% width and with enough room to fit both DIVs?
Margin is not added in when using box-sizing : border-box. If you remove the left/right margins your boxes line-up on the same line.
I also noticed your <div> elements have white-space between the first one's closing tag and the second's one opening tag. When using display : inline-block this will add space between the elements and they won't line up on the same line.
Demo: http://jsfiddle.net/MK7Fs/1/
box-sizing Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Some reading on the space between display : inline-block elements: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
As Jasper said, margin is not added when using box-sizing: border-box. This day and age, however, we've got a new tool in our toolbox: calc.
You can give the boxes width: calc( 50% - 40px ); (assuming you've got a total of 40px of margin).
Demo: https://jsfiddle.net/htwj/yzh7zg25/
You're misunderstanding how border-box works. The box-sizing property will at most constrain the padding and border boxes of an element to its contents width & height.
The definition of the border-box value as stated in the Basic UI Module:
Any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.
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.