.container { border-bottom: 1px dotted...">
Geek Answers Handbook

How to lay a div without expanding the border?

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 that the bottom border also applies to 200px before the indent. I want the lower border to start at 200px. It can be done?

+5
source share
3 answers

Use the field instead of filling or use the internal div .. (updated according to the requirements outlined in the 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>

Here's what it should look like: http://jsfiddle.net/dKVTb/1/

+11
source

Maybe so with margin-left

http://jsfiddle.net/ppMmy/

CSS padding properties define the space between the border of an element and the content of an element.

, "" <div>

0

, :

<div class="container">
    <div class="content">
        content here
    </div>
</div>

CSS:

.container {    
    padding-left:200px;
}
.content {    
    width:500px;
    border-bottom: 1px dotted #999999;
}
0

More articles:


All Articles