Home/ Questions/Q 8370715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:58:47+00:00

I’m trying to use padding in a div and which is wrapped by another

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0