Menu
I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
399
To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.
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).
If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
117
Or with calc
<html>
<head>
<style type="text/css">
.container {
position: relative;
width:500px;
padding-left:200px
}
.container:after {
content: '';
width: calc(100% - 200px);
position: absolute;
left: 200px;
bottom: 0px;
border-bottom: 1px dotted black;
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
fiddle
25
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
