i'm writing my little css framework but i got a strange problem, check this jsfiddle please: http://jsfiddle.net/76y8B/
as you can see the red div has 1px margin right but i setted all to margin:0;
Any help please?
Your making a calculation error. You've sized your div to 96% of the body. Say the body is 1000 pixels wide, that means the div is now 960 pixels. You then give it a padding of 2% on both left and right side, meaning 2% of 960 pixels, or 19.2 pixels on both ends. 960+19.2+19.2 = 998.4 pixels total width. That's where the minor gap comes from.
The only way to fix this without fixing other markup is to correct for the calculation origin of the padding, ie. set the paddings not to (100-96)/2 but ((100/96)-1)/2 or 2.08333%. The following thus solves the gap:
.heading {
padding: 13px 2.08333% 8px;
}
Alternatively you can use border-box to change how these values are calculated, see this other answer here.
Another solution is to set 100% width and a cooler box-sizing: border-box.
.heading {
/* new stuff */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
/* end of new stuff */
clear: both;
color: #FFFFFF;
line-height: 25px;
margin: 0;
min-height: 28px;
padding: 13px 2% 8px;
}
Running demo
Read more on Box-sizing, and on the differences between the W3C Box model and the Traditional Box Model:
Box models
In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
The element has the display property inline-table. Is the per design? That, in combination with the 2%+2%+96% logic is what is causing the margin, change it to inline-block and you’ll see.
display:inline-table in .row-fluid is causing problem.
Remove it or write display:block.
Updated fiddle here.
Related
Why does my scrolling div with text extend beyond its container vertically?
http://www.blakearchive.org/blake/public/exhibits/test.html
I'm not sure what code to show here. That is a div (right column--it circles around, that's why it's right, not left) with 100% height inside a container 'columns' div with 100% height, but former is extending beyond the latter.
Thanks.
To fix the extended container, use display: table. Set a css property table to the container and table-cell for their children, as follow:
#columns {
display: table
}
#menuBarLine {
display: table-cell
}
#galleria {
display: table-cell
}
#right {
display: table-cell;
box-sizing: border-box
}
adding this display property will fix your problem.
just keep in mind that anytime you have a split column, use display: table property as much as possible because display: table gives you flexibility in setting up the container width and height. If the container is like "grids", I will encourage to use display: table.
box-sizing: border-box changes the way width and height calculate. Now, width and height will include the padding of the container. Therefore, by using box-sizing: border-box, you will almost certainly get the value that you want. I think this should be the default value of the css property width and height. READ MORE
Two things: You are giving it 100% height and padding.
The first is an issue because there are buttons above it, and therefore it cannot occupy 100% of the height of the window without forcing the window to scroll.
You can fix this by using calc:
height: calc(100% - height_of_button_containerpx);
Note: pay particular attention to the syntax. Note that there is no space inbetween numbers and units, but there is a space between each value and the minus sign. This is important!
Note this too: calc() is CSS3 and is unsupported in really old browsers.
The second: padding is applied in addition to height. You are telling the div to have Qpx additional space surrounding its 100% height, and so, since the height cannot be greater than 100%, the window must scroll.
This can be fixed quite easily with box-sizing:
#myDiv
{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
calculate the height of the div with ID menuBarLine. and then
#columns .right {
position: relative;
float: right;
width: 30%;
height: 96%;//(total height of the parent container of #right div -height of the menuBarLine)
overflow-y: auto;
padding: 2%;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: justify;
}
Can someone tell me why the box-sizing doesn't seem to honor the padding in the div given the following fiddle example
// The code is too long for this but can be viewed using browser debugging tools
// and here is a picture that says it all.
The left column is fixed width: 190px;
The right column is width:100% with a margin-left: 190px
The green div is a nested div without a width and height:20px;
<style>
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
Shouldn't the padding push the green line in as it is on the left side?
The problem in this instance is with the #wizard-body div, which has a left margin but also a width of 100%, which means it's way to wide for its container. The float also messes things up. Remove these and it will work as expected:
#wizard-body {
float: left;
width: 100%;
}
The green div is behaving as expected, but is following the container off screen.
box-sizing:border-box does not remove the padding. It just dont take it into account when calculating width of div.
div {width:400px; padding:10px;} will give a div with width of 420px as width also includes padding.
But
div {width:400px; padding:10px; box-sizing:border-box;} will give a div with width of 400px since it does not includes padding.
But in both cases padding remains there.
How can I add padding to an element without adding on top of the predefined width?
It's good to define the width of a column to make a clean grid for the layout; but also wants to add padding to the contents inside the column. Any way to specify that?
element {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Use box-sizing, it makes padding inclusive:
https://developer.mozilla.org/en-US/docs/CSS/box-sizing
Example:
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
It's worth noting that this won't work on IE7.
For IE8, please see the top answer to this Q: box-sizing: border-box => for IE8?
Everytime you add padding to block element, the width of this element changes. This problem has many solutions. I usually set margin to first child element and set width: 100% for this element.
For example, we have:
<div id="main">
<div id="child">
This is content with margin
</div>
</div>
CSS style for these elements:
#main {
border: solid 1px red;
float: left;
width: 5em;
}
#child {
border: solid 1px blue;
float: left;
width: 100%;
margin: 0.5em;
}
This is a solution for any browser
It's an old thread, I know. But last time I had a complete black hole about making a DIV with a NOT set width and with paddings, so it will not blow up my 3-columns row and with CSS2. So I put one DIV with float left, on with right and between them a DIV with no float and no fixed width, but I wanted to have padding in it. How about that...
I gived up. :D But I put an inner DIV in the center one and give it width=90%. So far so good, a very simple and not great solution, but sometimes it helps to achieve the look you need. ;]
b.r.
When I shrink the browser width past a certain point the spec div drops below the main div. I want to prevent this from happening. I thought perhaps I could make a div that holds both #main and #spec and set a min-width for it, but that does not seem to work.
#main {
clear: both;
width: 400px;
min-width: 400px;
float:left;
padding: 10px;
}
#spec{
padding: 4px;
float: left;
width: 270px;
}
I tested this out using min-width and it definitely works. Because the elements are floated they need to be cleared inside the container for it to work.
See the example here, http://jsfiddle.net/3TDNf/
Cheers
I am willing to bet you are running in to an issue with the CSS Box-Model.
In a nutshell, the box model for some reason, does not include the border or padding, which most people expect that it will (and in fact it used to, further confusing the situation)
I suggest adding the following rule to your CSS:
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This will cause your web pages to use the border-box style of box model, which means everything except the margin will be counted in the element's width.
You said:
I could make a div that holds both #main and #spec and set a min-width
for it
Yet your posted css shows that you placed the min-width: 400px; on the #main div. Perhaps you need to move the min-width:400px; so that it applies to the div that contains both #main and #spec.
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.
Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting textarea's to wrap content the same as e.g. div elements in Firefox
It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.
This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.
Here's a jsFiddle for demonstration purposes.
Getting textarea's to wrap content consistently across browsers
If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.
textarea {
padding: 0 5.5px 0 5.5px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Here's a jsFiddle showing this approach.
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
.testbox {
padding: 10;
margin: 10;
border: 5px solid black;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
You could work around this by using something like this:
<div class="testbox">
<textarea class="testarea"></textarea>
</div>
css:
.testbox {
padding: 0;
margin: 0;
border: 0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
.testarea {
padding: 0;
margin: 0 -1px;
border: 0;
background: red;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 16px;
}
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.