I have a problem using a given CSS file I don't want to change. In this file there is a format for inputs:
input {
display:inline-block;
width:60%;
}
Now I want to use an additional CSS file and change this formatting to a normal block element width full width:
input {
display:block !important;
width:auto !important;
}
Unfortunately, this doesn't work. Unlike normal block elements, the input does not take all the available horizontal space with this setting. It is only as long as it would be as inline element. Additionally, I cannot use width:100%; due to padding, borders and margin. In my desperation I already tried something like width:none;, but I couldn't find a way to reset the width to a block element's default value.
I really hope that somebody can help me. Thank you in advance.
You must use width: 100%, so my answer shows how to fix the problems you're having with it.
https://developer.mozilla.org/en/CSS/box-sizing
input {
width: 100%;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If margin is required, then wrap the input in another element and apply the margin to that.
Related
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.
I want to have a somewhat fluid site where the min-width would be 1000px and the maximum width would be 1200px. Can someone either show me how to do this or point me to a tutorial?
The issue that I was having was that if I gave a 10px margin on the body, whatever was on the page was being pushed off the right side of the page by 10px. How do I correct this?
Here is one good website that should help you to see the CSS for creating a fluid and fixed layout website-
http://csslayoutgenerator.com/
Regarding your 10px margin issue, here is a Test fiddle- (CLICK here), that I have made. What is the issue in it?
css-
body
{
margin:10px;
min-width:400px;
max-width:450px;
}
#test
{
background-color:yellow;
}
If you want to apply your margin, only if your width if more than a specific value, you can use media queries :
#media screen and (min-width: 1200px) {
margin:10px;
}
add the border-box property to you're element. This ensures that no matter what border, margin, or padding you place on the element, it will always produce a width that you specify
#element{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
min-width:1000px;
max-width:1200px;
}
CSS style works (as far as I can see) for all elements except the container div.
I can't get it to work, I have tried everything. It should have width and height and a black background color. This is the code that doesn't apply :
#container {
width: 588px;
height: 617px;
background-color:#000;
margin: auto;
}
The code seems right. Both CSS and HTML have passed the w3c validators.
Please help, I'm clueless. Thank you.
right now, looking at the html of your page, you have set the container tag as a class. You need to set it either as a div id, or change it to a class in the css.
so in the code above, simply change the # to a . (period) in front of container
.container { /* replaced # with a period */
width: 588px;
height: 617px;
background-color:#000;
margin: auto;
}
you container is a class instead of an id
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 have an input element inside a div element:
...
<div id="calculator-container">
<input type="text" />
</div>
....
In CSS I make the input width 100%:
#calculator-container {
border: 1px solid black;
background-color: lightgrey;
width: 200px;
padding: 10px;
}
#calculator-container input {
width: 100%;
}
I can't figure out why is there less free space on the right side of the input than on the left (please see the screenshot below). Maybe somebody can advise. Thanks.
Pointing out that on jsfiddle it looks fine but if you copy it locally it looks bad in both IE and Firefox. Here is the jsfiddle link just so you can copy the code: jsfiddle just to get the code
It’s because width means the width of the element’s content area. The <input>’s content area is surrounded by its padding and border.
http://jsfiddle.net/3f7RB/
If you set those to 0, the input no longer takes up more space than is available:
input {
width: 100%;
border-style: none;
padding: 0;
}
http://jsfiddle.net/3f7RB/1/
(Of course, form elements are often rendered a bit differently from regular elements, so different browsers may do different things.)
If you want padding on the <input>, you can either declare that as a percentage too:
input {
width: 96%;
border-style: none;
padding: 4px 2%;
}
http://jsfiddle.net/3f7RB/5/
Or use box-sizing (not supported in IE 6 or 7) so that width: 100% applies to the <input>’s content, padding and border combined:
input {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/3f7RB/6/
Because the input element gets width:100% which is 200px. this however doesnt take into account that it has a border of 2px, meaning it actually should be 196px.
try this:
http://jsfiddle.net/QLFrj/
#calculator-container input {
width: 196px;
}
Only problem is that it is no longer a percentage...
the reason why it's to right because of the border because it's to the width of input field means the width of input field is 100% + 2px. So, you can use box-sizing property got this:
Check this
http://jsfiddle.net/3f7RB/4/
OR
you can use outline property also . like this:
Check this
http://jsfiddle.net/3f7RB/7/
I've tried here and it works fine. Maybe another CSS statement is overriding some attributes of your div or input. You may try to inspect the elements with Firebug (on Firefox) or Google Chrome.
This happens because your input element wants to be 200px too. The width: 100% applies to the parent-element. In this case the #calculator-container.