CODEWITHSUNDEEP
htmlcss
JonoB
JonoB

Reputation: 5887

CSS block bottom border

I have a div that I would like to have a bottom border.

This can be see at http://jsfiddle.net/R5YN2/

What causes the border to not be placed right at the bottom?

Upvotes: 1

Views: 1080

Answers (7)

stephenmurdoch
stephenmurdoch

Reputation: 34603

set overflow: hidden on your recurring header wrapper http://jsfiddle.net/R5YN2/16/

Upvotes: 0

Guy Cook
Guy Cook

Reputation: 552

Here's the quick fix. Basically when you float left the header groups get taken out of the flow unless you clear them with something (an empty div is fine)

<div id="recurring-header-wrapper">
    <div class="recurring-header-group">
        <div class="recurring-header-label">Label</div>
        <div class="recurring-header-item">Item</div>
    </div>
    <div class="recurring-header-group">
        <div class="recurring-header-label">Label</div>
        <div class="recurring-header-item">Item</div>
    </div>
    <div style="clear:both"></div>
</div>

Upvotes: 0

Blender
Blender

Reputation: 298106

Your container element isn't accounting for the floated elements and is basically collapsing.

Give it the property overflow: auto and it should work:

#recurring-header-wrapper {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;

    overflow: auto;
}

Demo: http://jsfiddle.net/R5YN2/14/

Also, go easy on the class names. You can have selectors that target classes inside of elements:

#recurring-header-wrapper .label

Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.

Upvotes: 2

Funky Dude
Funky Dude

Reputation: 3947

the floated divs inside cause this. you can clear them. http://jsfiddle.net/R5YN2/9/

Upvotes: 0

samura
samura

Reputation: 4395

Short answer: the float:left.

To correct that you can add overflow: auto to #recurring-header-wrapper

Upvotes: 0

yoozer8
yoozer8

Reputation: 7489

It is displayed at the bottom (it ends there, the text is overflowing. Check that with overflow:hidden and most of the text disappear). Add a height to the div to make it the size you want.

Upvotes: 0

Filip
Filip

Reputation: 2522

If you float things you have to clear as well.

Read this: http://www.positioniseverything.net/easyclearing.html

This is what you're looking for. Add the class .clearfix to your wrapper-div (#recurring-header-wrapper).

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Upvotes: 1

Related Questions