I am trying to create a 100% fluid input box with a description on the left. I had it pretty much exactly how I wanted except it is now causing me problems when I put a border on the input box because it cuts it off on the right side.
Without resorting to using 99% instead of 100% width, how can I achieve this? Should I be doing this with an extra div instead of a "label"?
http://jsfiddle.net/GCt3z/18/
Indeed:
box-sizing: border-box;
Will change the box-model on the element, which would include border and padding inside of the width calculation.
Example
Just adding a padding to compensate for the border being cut off would solve your issue as easy as possible:
.fieldwrapper { overflow: hidden; padding: 0 2px}
http://jsfiddle.net/GCt3z/24/
Related
I have a problem with this site which I can't seem to figure out:
Link to site here
Somehow I get a white border at the bottom of the page.
When looking around people said it could be the padding so I added everywhere:
box-sizing: border-box;
and the only place it worked was making my width 100% Height is still more than 100%
I also tried but with no luck.
margin-bottom: 0;
Your footer element has display: inline-block. Add vertical-align: top to its CSS, this will remove that white space. (Otherwise it's aligned to the baseline by default, which creates some white space below that baseline)
if anyone still have this problem you can check if last div of page/bottom of page have "p"
All you need to do is p{margin:0;}
I'm trying to style a div very exactly, but the scrollbar is getting in the way. The div has a padding-right of 20px. When the scrollbar is present on the right-hand side, it squishes the div.
Instead, I want the scrollbar to take up some of the padding space. Is this possible with CSS styling (not Javascript checking and manipulation)?
EDIT: Some things I cannot do:
Use JavaScript to check whether or not the scrollbar is present.
Set a fixed width for the div.
2 ways to do it:
div {
box-sizing: border-box;
}
or:
div {
width: calc(100% - 20px);
}
where 100% is the div width and 20px is the padding value, reduced of the total;
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.
I'm trying to create a layout where the header is fixed and the middle header div is aligned with the content div.
I got two issues:
There is a small offset that I can't fix.
The border-top of content-wrapper is not visible, why?
Fiddle: http://jsfiddle.net/sxZJ3/3/
Offset and no border-top:
The offset is due to you setting a padding: 5px on a width: 100%.
The reason you can't see the border-top is because of the border-bottom on the #header, which gives it an extra 1px of height, for a total of 61px. I would decrease the height to 59px, thereby yielding a total height of 60px.
Edit: Here's an updated fiddle
Easy fix is to replace width: 100%; with right:0; left: 0;: http://jsfiddle.net/sxZJ3/14/
if you remove the padding there is no issue, The main content is floating directly below the header. If you want to decrease this gap you could use padding or a variety of other options. Margin or even use the single border for both elements inline.
Could also try some positioning tricks. Div inside a container with a postition:relative and a fixed-height. Then on the div position:absolute and then margins and padding as necessary.
I would recommend a build more along these lines where you remove the body margin and allow the content-wrapper to be the sole margin pushing down the content. Also the padding within the header is causing the #menu to be offset by 5px within the header element. http://jsfiddle.net/sxZJ3/12/
My question is how to manage the size of an element (let's say a div) with percentage. I have a situation where I made two divs float side by side and both takes 50% of the div that contains them. Each of these two div have borders of 1px, margin of 5px and some padding. So how am I supposed to manage these static sizes and the dynamic size of the content (divs). Cause in the case I just mentioned, they will not float side by side because of the borders, padding and margin that make the size over (100%).
What are the solutions? In my case the sizes of margin/padding/borders are small so I guess I could just set the size a bit lower (like 45%) and hope it will fit. But I think this method is sloppy, since if I set the size of the padding higher, I will have to adjust the size of the div with trials and errors until I find the perfect size. Is there a proper way to achieve this?
Thanks a lot.
A clean work can be made by making the two floating divs with 0 margin and 0 border, just width at 50%.
Then inside each you can put a div that fits its container, with static margin and padding.
As alternative, you can keep everything dynamic, so put something like margin:1%, you'll get a nice behavior in window resizing!
From https://developer.mozilla.org/En/CSS/Box-sizing
/* support Firefox, Safari/WebKit, Opera and IE8+ */
.example {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
you can use box-sizing: border-box so that the 50% then applies to the inner+padding+border, but sadly no setting to add the margin.
You can however use a div inside a div and use padding on the outer div to mimic the margin.
here's an example JSFiddle