CODEWITHSUNDEEP
htmlcss
blsn
blsn

Reputation: 1093

How to use padding in div correctly?

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.

Upvotes: 5

Views: 38774

Answers (4)

Uber Kluger
Uber Kluger

Reputation: 502

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.

Upvotes: 0

Cypress Frankenfeld
Cypress Frankenfeld

Reputation: 2557

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.

Upvotes: 6

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

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;

Upvotes: 0

Lars Knickrehm
Lars Knickrehm

Reputation: 747

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;

Upvotes: 1

Related Questions