CODEWITHSUNDEEP
csshtmlmargin
APAD1
APAD1

Reputation: 13666

How to remove padding from last generated DIV on a page

I have an ExpressionEngine installation which generates a DIV for each person's bio on the contact page. I have the margin-bottom set to 20px for these DIVs that are generated but I want the last DIV to have 0px margin on the bottom so that there is the same amount of space between the bottom of the last div and the bottom of the container as there is at the top of the first DIV. I know you can use something like :nth-child for P and LI elements, but I'm wondering if there is a similar way to do this with an entire div. This is the code I am using:

{people}
    <div class="bio mobile-inner">
        <img class="grid_4_desktop grid_4_tablet grid_1_mobile" width="216" height="auto" title="" src="{image}" />
        <div class="grid_12_desktop grid_8_tablet grid_1_mobile leader-info">
            <h3>{name}</h3>
            <h5>{title}</h5>
            <p>{bio}</p>
        </div>
    </div>
{/people}

Thanks in advance!

Upvotes: 0

Views: 1371

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240938

Without knowing which element has the margin, it is difficult to tell, however this should solve it, assuming the .bio element has margin-bottom, you would use:

.bio:last-child {
    margin-bottom:0px;
}

You might need to be a little more specific in the selector to ensure that it will overwrite the initial declaration. Also, make sure this declartion is appearing after the initial one in the stylesheet, as it is read from top to bottom. Thus you don't want it to be overwritten.

Upvotes: 2

DaniP
DaniP

Reputation: 38252

You can use this :

div.bio:last-child {
  margin-bottom:0px;
}

The demo http://jsfiddle.net/Z7Whb/1/

Upvotes: 3

Turnip
Turnip

Reputation: 36662

#your_parent_container div:last-of-type {
    margin-bottom: 0; 
}

DEMO

Upvotes: 1

Related Questions