Of course, width: 100% on a block element fills the container, but only if border, padding, and margin are zero. Putting such an input in a containing div with padding does the trick, but I'm curious why simply input {display: block; width: auto;} doesn't work. Suggestions?
I agree with centr0 as to why width: auto doesn't work.
If you actually want to get an input to be full width of its container, then the following works. Given:
<div id="Container">
<form>
<input type="text" />
</form>
</div>
Do this with the css:
form {
padding: 0 0 0 14px;
}
input {
padding: 5px;
width: 100%;
margin: 0 0 0 -14px;
}
Explanation: Obviously, the -14px margin on the input counteracts the padding added to the form element. What is not so obvious is where the 14px came from. It is equal to the left/right 5px padding of the input plus the default for input element's border width (2px on all the browsers I tested). So 2 + 5 + 5 + 2 = 14.
To really be sure you are consistent cross-browser, you would want to explicitly set the border width to what you desired for the input. If you want a different padding (or thicker/thinner borders), then just redo the math. A 3px padding would be 10px instead of 14px, a 7px padding would be 18px instead of 14px.
For the example, you can set the width of #Container (could also be the body itself that is just defaulting to 100% of the page width) to what you desire, and the above css should match its width.
if i remember correctly the default size of input doesn't span the width of its container. "width: auto;" is like "resetting" the style back to its default value.
If you aren't using a Reset CSS Stylesheet then the input element will have some default styling set by the browser, this probably includes padding and margins.
also, width:auto will give the browser default. Try width:100%
Reset the container's padding resolves the problem.
td {
padding: 0 1em;
}
Related
I have the following markup:
<a class="logo" href="/" style="
display: inline-block;
"><img src="/img/logo.svg"></a>
only on IE 11 it seems like the img is pushed down and cut off.
.logo CSS
border-radius: 0;
float: left !important;
background-color: transparent;
margin-top: -10px;
padding: 0;
margin: 0;
and on the img I only have the width set to 130px.
The link and also the image are inline-block , that creates a lot of space due to line-height. Use a reset or set the outline/border to 0 for both links and image and set the line-height to 1 for these two elements.
A couple of ways to handle this in case anyone else experiences this issue.
Give img a min-width and min-height of a value higher than the width. In your case it's 130px so 131px? You'll have to play around to see how many pixels are being clipped. -- this is specific for IE11
or
Give img a min-width and min-height of a value of 100% and position it relative to the containing element - .logo class. If you want the img to live inside of the containing element, you'll need to give it a width that is larger than the img. -- this is better for cross browser support.
Hope this helps.
Everytime I try to add padding around the outside of an input, it just adds padding between the placeholder and the inside of the input. Does anyone know how to fix this?
#ask {
padding: 10px 10px 10px 6px;
font-size:45px;
background-color:#F2F2F2;
}
<input id="ask" type="text" placeholder = "Ex: How tall is the Gateway Arch" autocomplete="on"/>
Padding it's the space between the element and it's content. Maybe you should try margin.
#ask {
margin: 10px 10px 10px 6px;
font-size:45px;
background-color:#F2F2F2;
}
Why don't you use margins?
In your case something like that:
margin: 10px 10px 10px 6px;
Padding always clears area around the content of an element.
http://www.w3schools.com/css/css_padding.asp
While margin is used to clear area around an element.
http://www.w3schools.com/css/css_margin.asp
Try adding a margin instead of padding.
https://jsfiddle.net/Lw4d1ghs/
Margins change the space outside an element, padding change the space within it.
These rules are governed by the CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
Ok, so I have a class that modifies the looks for a specific type of anchor that I'm using, but the problem is that the browsers keep adding the 30 pixels of padding that I have set onto the defined 100% width, so it's stretching out past the box which the anchor is located in.
div.box div div div a.option_line {
cursor: pointer;
display: block;
font-weight: normal;
min-height: 30px;
padding: 0px 10px 0px 20px;
text-align: justify;
width: 100%;
}
Can anyone think of a way to make the anchor stay within the boundaries of the box?
Just take out the width: 100%, as the a is declared to be a block level element, it will stretch to the maximum width available without going over.
Remove the width:100%; that caused the issue, since you already set the display to 'block' the width:100% isn't necessary because block elements occupies the available width of the container