Html width 100 with padding

Padding within inputs breaks width 100%

Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements. For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that’s not a possible step. Take a look at this:

body < font-size: 14px; margin: 0px; padding: 0px; >DIV.formfield < clear: both; margin: 0px; padding: 10px; >DIV.formlabel < margin-top: 20px; padding: 5px; font-weight: bold; text-align: left; >DIV.formvalue < background-color: #eee; border: 1px solid red; padding: 10px; margin: 0px; >DIV.formvalue.correct < border: 1px solid green; >textarea.textarea < width: 100%; min-height: 80px; >input.input < width: 100%; padding: 5px; >input.input2 < width: 100%; >input.input3 < width: 100%; padding: 5px; margin: -5px; >input.input4 < width: 100%; padding: 10px; margin: -10px; >input.input5

 
No padding
 
No padding here 
 
Also no padding
 
 
 
5px padding, which extends the parent element, d'oh!
 
 
 
5px padding and -5px margin, this does the trick, almost.
 
 
 
10px padding and -10px margin, things are falling apart on the right side
 
 
 
 10px padding and box-sizing: border-box
 
 
 

The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width. Problem here is that I can’t add a child element inside the input so I can’t fix it. So the question is: Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don’t know beforehand the width of the parent.

Источник

How to make div 100% width when parent tag has padding?

I have an HTML page where the body tag has CSS padding-left and padding-right applied. I’d like the page footer div to be 100% width of the page though, without the body padding applied. Is there a good/easy way of doing this ?

Yeah I could do that with javascript, but I was thinking there was probably a CSS way I was missing too.

7 Answers 7

You could apply a negative margin to the inside container to negate the padding

@Zindokar You could create an SO question for that problem and put the link here. Would be interesting to look into

If you give the footer a left and right margin that is a negative amount, of equal size to the padding of the body, then it will counter the body’s padding.

Another alternative way can be this : using calc

.parent < padding:0 20px; >.child < width:-moz-calc(100% - 40px); width:calc(100% - 40px); > 

After some playing around, ‘width: inherit;’ solved it for me:

There is another way of solving this using calc on the parent element. That way, both the padding and the calc are in the same CSS class, and if the padding has to be modified you will see more easily that the calc formula has to be modified too than if it lies in the child element CSS class.

This is the best answer in my opinion. There might be some issues with the exact example, but using calc on the parent is cleaner.

Not sure if that is for your case specifically, but i had a form (trying to code for responsive), width:100% and needed padding in inputfields so the solution was

form < margin: 0px 3%; width: 94%; >input:valid, textarea:valid

Inherit on fields just did the trick. (Only tested in chrome)

Источник

100% width, padding and absolute positioning

I was trying to make a div fill a certain part of the screen, leaving 412px empty both to the left and to the right. Easy, eh? Now, when I add position:absolute & top:0, the fill disappears. The element inspector shows it’s empty — the «paddings» stay, but the width:100% disappears. I’ve used this code (without the positioning):

So, how can I position it absolutely (I need it animated later), while preserving the padding? I’d love your help very much. Thanks in advance!

Thanks, I know. It was just for the sake of the speed of writing. When publishing, I’ll separate it indeed. Once again, thanks for attention!

2 Answers 2

Nope, because, as I stated, I need it to leave 412px (in this case) both to the left and to the right. And this way. Just try it out and you’ll see 😉 Thanks though 🙂

Then I don’t yet understand what you want. It does leave 413px (412?) to the left and right. Is there a minimum width you want the div to have?

Oh.. Sorry, probably when replying, I’ve answered the wrong comment. This works. Very grateful, thank you!

Note that when you make the window too narrow, the solutions of both myself and Sotiris will result in a div with no width.

Thanks, I suppose that’s a fair drawback looking at what I am planning to do. Plus, something like min-width for a dlobal div container might take place 😉

from the moment you need to use position:absolute; why not use the properties left & right instead of padding?

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
 
 

an alternative if you need badly to use padding you can set left:0; right:0; and then use the paddings you already have.

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
 
 

Источник

Display a div width 100% with margins

Don’t put margin:10px and width:100% on the same level. create child div to put width:100%, and You can keep the margin on the parent.

6 Answers 6

You can use calc() css function (browser support).

Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):

The best solution is to use calc() in modern browsers, and JS code + Modernizr for older browser which doesn’t support calc() .

Css function ? thats sound great. but i use chrome and chrome tell me «invalid property value». but why ?

You have to use calc(100% — 10px) (space between number and minus). Also for chrome and safari use -webkit prefix, -moz for FF and -o for Opera!

If you want to be cross-browser compatible, this probably is not the best approach. Since often users don’t have to latest and greatest browser.

Why isn’t this calc(100% — 20px) ? 10px would only be one side of the margin and would only reduce the width by half the required distance to fit. Unless I’m missing something.

Sometimes it’s better to do the opposite and give the parent div padding instead:

What I did was change the CSS of #page to:

Then delete the margin from #margin

Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px — so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.

This is the right approach for doing calculations with CSS for now. This illustrates the basic principle that you end up with a div structure that mimic the parse tree of the expression you want to evaluate.

You can use the following CSS to achieve the desired result:

Completely removing the width doesn’t seem like the appropriate way to solve the problem of combining margin and width functionality.

The correct way to achieve this by standard is:

+1 As width: auto worked like a charm compared to width: 100% . Having googled the difference I’m not sure why anybody would use 100%. If they know what they’re doing. Which I certainly don’t.

There is no «correct» way, and this question goes beyond elements which are display:block by default (like tables for example), therefor this solution is lacking.

Well, width: auto; is the default value for that property. So adding it is redundant, in my opinion. Not that the answer is not right, just don’t add css for a property if you’re going to set it to its default value.

For LESS users only:

Using the nice solution of Vukašin Manojlović doesn’t work out of the box because LESS executes + or — operations during the LESS compilation. One solution is to escape LESS so that it doesn’t execute the operation.

@someMarginVariable = 15px; margin: @someMarginVariable; width: calc(~"100% - "@someMarginVariable*2); width: -moz-calc(~"100% - "@someMarginVariable*2); width: -webkit-calc(~"100% - "@someMarginVariable*2); width: -o-calc(~"100% - "@someMarginVariable*2); 

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize)

Источник

HTML CSS Box with padding and margin and 100% width? [duplicate]

I have a box #box with width: 100%, height: 100%, padding: 5px, margin: 5px; border: 5px; I need in HTML5 layout correctly display that. Now i have that: But i need fit block in body area. Code:

  body,html < width: 100%; height: 100%; margin: 0; >#box  
Text will be here
  

I see in the answers, box-sizing is now all the rage. Be careful about using that if you do as there are issues with it (caniuse.com/#feat=css3-boxsizing) and most people don’t use it in their examples.

6 Answers 6

The browser does excacly what you are telling him to do 🙂 However I think you don’t like the overflow it has.

What happens is that your #box expands because of your border and padding. You can make these properties inset, so it does not expand your element. You can do this with box-sizing :

However you can not do the same with the margin , because the element is pushing itself from the body: it does what it supposes to do.

You can make a workaround by doing the same thing as above:

You will use the padding on the body instead of the margin on the #box .

jsFiddle

To prevent the double padding space, you should only apply it on the body element (or html, but i prefer the body as that is your visual element in the end).

Источник