Menu
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.
468
The CSS property you are looking for is padding. The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).
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:
.content
.content > * {
padding-left:10px;
}
.content using percentage.content {
padding-left:2%;
width:68%;
}
.content {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
All three of these solutions incur some bad things.
.content could cause problems down the line when you want to give an element padding other than 10px..content using percentage will look slightly different on different sized windows.
76
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
