CODEWITHSUNDEEP
htmlcssweb
LearningDeveloper
LearningDeveloper

Reputation: 668

Need padding at the bottom of DIV Elements

I was working on a simple HTML, CSS design. Need some help with it.
I need a padding at the bottom, but am stuck on where I have to add the padding.

PS: JSFiddle link at the bottom.

HTML Code

<div id="note1" class="notes-note">

    <div id="toolbar1" class="notes-toolbar">
        <div class="notes-title">Title</div>
    </div>
    <div id="content1" class="notes-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

</div>

CSS

/* Notes */
.notes-note {
    width: 175px;
    height: 100px;
    margin: 5px;
    background-color: #FFFDD0;
    overflow: hidden;
}

/* Toolbar */
.notes-note .notes-toolbar {
    background-color: #E6E4BC;
    height: 20px;
    padding: 6px;
}

/* Title on the Toolbar */
.notes-note .notes-toolbar .notes-title {
    float: left;
    font-weight: bold;
    overflow: hidden;
}

/* Notes Content */
.notes-note .notes-content {
    overflow: hidden;
    font-size: 0.9em;
    margin: 10px;
}

Here is the Link to JSFiddle
JSFiddle Link

EDIT The text will be of variying length and also the "note1" DIV Element will be resizable. So, any solution that will help me in this is much appreciated.

Upvotes: 0

Views: 106

Answers (4)

Danield
Danield

Reputation: 125493

Maybe you would like to wrap the .notes-note class in a container - and give the container bottom padding.

.container
{
   background: #fffdd0;
   padding-bottom: 10px;  
   width: 175px;   
}

FIDDLE

Also i added a few pixels to the height of the .notes-note class so that initially the text isn't cut.

Upvotes: 0

David Allen
David Allen

Reputation: 1163

Simply solution is to put a border on the bottom

http://jsfiddle.net/davidja/ZteLW/6/

.notes-note {
width: 175px;
height: 100px;
margin: 5px;
background-color: #FFFDD0;
overflow: hidden;
border-bottom: solid 10px #fffdd0; // Add This
}

Or as Mr Lister pointed out you could use a transparent border. But you will need to use css box-sizing to position the border inside the box - http://jsfiddle.net/davidja/ZteLW/10/

.notes-note {
width: 175px;
height: 100px;
margin: 5px;
background-color: #FFFDD0;
overflow: hidden;
border-bottom: solid 10px transparent;   //add this
box-sizing : border-box ; //add this   
}

Upvotes: 3

G-Cyrillus
G-Cyrillus

Reputation: 105903

You do not say why you need a padding-bottom.

Is it not to show half of a line ?

If so , you need to set line-height according to the numbers of line you want to see in this 100px height:

http://jsfiddle.net/ZteLW/4/ for instance, but this way is not solid if you have different font-size. cause you set height in pixel , so line height shoul be in pixel too. try this one as well if it fits better to your needs : http://jsfiddle.net/ZteLW/7/

/* Notes */
.notes-note {
    width: 175px;
    height: 100px;
    margin: 5px;
    background-color: #FFFDD0;
    overflow: hidden;
    line-height:18px;
}

Upvotes: 0

m1crdy
m1crdy

Reputation: 1401

give it to the id content

#content1{
   padding:5px 5px 5px 5px;
}

or the class notes-content

.notes-content{
   padding:5px 5px 5px 5px;
   // top right bottom left
}

Upvotes: 0

Related Questions