5

I’m trying to use padding in a div and which is wrapped by another div (‘container’), apologize for this simple question, but I couldn’t find an answer.

As long as I don’t use padding:10px; the structure of the page is stable. i.e. the right div is floating to the left (‘content’ is aside ‘sidebar’).

<html> <head> <style type="text/css"> .container { max-width: 960px; background-color: RED; height: 200px;} .sidebar { background-color: GREEN; width: 30%; float: left;} .content { background-color: YELLOW; float: left; width: 70%; padding: 10px;} </style> </head> <body> <div class="container"> <div class="sidebar"> <p>text in sidebar</p> </div> <div class="content"> <p>text in content</p> </div> </div> </body> </html>

When using padding:10px; the right div (‘content’) goes down under ‘sidebar’ instead floating to the side of ‘sidebar’.

I’ve tried clear: left; (right, both) but it doesn’t help me.

Any solution for the above and which is not particular style to <p> ,would be appreciated.

Improve this question

4 Answers 4

Reset to default
6

In order to avoid going over 100% of the page width and bumping .content down, you may have to make some compromises. I can think of a few solutions:

1) Pad all direct children of .content

.content > * { padding-left:10px; }

​

2) Pad .content using percentage

.content { padding-left:2%; width:68%; }

3) Change the behavior of the box model

.content { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

All three of these solutions incur some bad things.

  1. Padding all the direct children of .content could cause problems down the line when you want to give an element padding other than 10px.
  2. Padding .content using percentage will look slightly different on different sized windows.
  3. Changing the behavior of the box model can be bad if you don't know what you are doing because it alters the default, standard CSS model to one that is not widely used (in this example, we're basically telling modern browsers to use IEs quirksmode box model), but it seems like the best solution for your case. There are basically no issues with it, other than lack of support in IE7, which only has around 2% of browser market share.
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I would be carefull with the * selector, as it is an expensive one. Consider putting an extra div inside your content, .content-inner for example, and giving that a padding of 10px.
thanks all for your answers, due to the compatibility issues mentioned above, I’m using Cypress solution.
After reading more about box-sizing. I would recommend going that route. IE7 is the only one that doesn't support it, and as of May 2012, estimates of IE7's global market share were 1.5-5% Basically, people aren't using IE7.
1

That behaviour is totally correct. Please remember the so-called box model (in short):

margin, border and padding will all be added to the width value

In this case you have to calculate

30% + 10px + 70% + 10px = 100% + 20px

Browsers start supporting the css property box-sizing (see https://developer.mozilla.org/en-US/docs/CSS/box-sizing for more information). You can set it to border-box in order to change the default box model.

But remember to use those browser suffixes, too:

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
Improve this answer

Comments

0

This is a common problem, with typical web design not behaving the way our common logic would expect.

What is happening is the padding is actually making the .content div become wider than its allocated slot, thus forcing it down underneath.

There's a few ways around this.

This rule: box-sizing:border-box; makes it so that if you set width:100px and padding:10px;, the browser automatically makes the whole DIV 100px no matter what.

What in effect is happening is the DIV is becoming 80px wide, with 10px padding either side.

I've created a jsfiddle

The browser support for this rule is generally very good, although make sure to include all the rules I've added in the js (I.e, the one with, -webkit-, -moz-, and the one above which is just box-sizing:border-box;)

For reference, all the rules here:

 box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
Improve this answer

2 Comments

be carefull with browser compatibility if you use this. We developers are used to decent browsers, but the majority of users stil work with (old versions of) IE. I would go for the solution @cypressFrankenfeld offered!
Compatibility is pretty good If you're supporting IE 7, then use the manual mode of making the width of the DIV the width you want, minus the padding * 2.
0

All the other answers (to date 10sep2020) concentrate on the fact that adding the padding to the .content DIV makes it larger than the required 70% causing it to be pushed under the .sidebar DIV and then trying to get the DIV size to be 70% including the padding. The simplest answer is to NOT pad the .content DIV (so it stays at 70% of the .container DIV) but to pad the P inside it. Without a width specification, the inner P is 100% of the DIV INCLUDING the padding thus the text of the P will compress accordingly (to 100% of the .content DIV - 10px on each side). So change

.content { background-color: YELLOW; float: left; width: 70%; padding: 10px;}

to

.content { background-color: YELLOW; float: left; width: 70%;} .content p { padding: 10px;}

Alternatively, adding box-sizing: border-box to the .content style changes the size calculation to include the padding but this is CSS3 while moving the padding into the P works in earlier versions. (Is anybody is still using it?)

Having tested this, I just have one (rhetorical) question. Why float both DIVs? If you only float the .sidebar DIV then extra text in the .content DIV will flow under it (and the width is now from the left edge of the .container DIV). By floating both, the extra text in the .content DIV stays to the right leaving a blank area under the .sidebar DIV (if it has less in it than the .content DIV). I assume that this is the intent but this is exactly the same effect that would result from using a 2 column table,

<html> <head> <style> .table_container { width: 100%; max-width: 960px; background-color: RED;} .table_sidebar { background-color: GREEN; width: 30%;} .table_content { background-color: YELLOW; width: 70%; /* unnecessary */ padding : 10px;} </style> </head> <body> <table class="table_container"> <tr> <td class="table_sidebar">text in sidebar</td> <td class="table_content">text in content</td> </tr> </table> </body> </html>

This does have a few slight differences from the original (floating DIV) solution.

  1. There is a slight gap around each cell.
  2. The sidebar is the same height as the content.
  3. The table is only as high as its content (possibly less than the 200px specified).
  4. The content of the TDs has no upper or lower margin (default CSS for a P in a DIV).
These can be fixed as follows:

  1. Add border-spacing:0 to .table_container and (for older browsers) cellspacing="0" as an attribute of the TABLE.
  2. Add rowspan="2" to the content TD, add an empty TD below the sidebar TD and force the sidebar TD to be as low as possible by adding height:1px to .table_sidebar.
  3. Enclose the table in a DIV of the required height.
  4. Add P elements with specifically defined upper and lower margins in the TDs (default CSS for P in TD apparently has no margins).
<html> <head> <style> .container { max-width: 960px; background-color: RED; height: 200px;} .table_container { width: 100%; background-color: RED; border-spacing: 0;} .table_sidebar { background-color: GREEN; width: 30%; height: 1px;} .table_content { background-color: YELLOW; /* width: 70%; still unnecessary */ padding : 10px;} td p { margin: 1em 0;} </style> </head> <body> <div class="container"> <table class="table_container" cellspacing="0"> <tr> <td class="table_sidebar"><p>text in sidebar</p></td> <td rowspan="2" class="table_content"><p>text in content</p></td> </tr> <tr><td></td></tr> </table> </div> </body> </html>

While both methods produce the same output, the TABLE method is much less dependent upon getting sizes just right.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.