CODEWITHSUNDEEP
htmlcss
luxi
luxi

Reputation: 317

Placing border-image bottom to a div

I'm having a problem with the floated elements to which I want to give some background image at the end of a box as this:

+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
  ================           ==============            =================

But this goes likely to this:

===========================================================================
+--------------------+    +-------------------+     +---------------------+
|                    |    |                   |     |                     |
|                    |    |                   |     |                     |
+--------------------+    +-------------------+     +---------------------+
===========================================================================

I have used the border property instead of an image here. DEMO

Upvotes: 0

Views: 83

Answers (4)

Garrin
Garrin

Reputation: 571

As everyone here suggested while I wrote this, you have to put the spacer inside the div. Otherwise, it doesn't know where it belongs and which width to use. If you want to have the red borders outside the spacer, simply add another div for the content:

<column>
    <border>
        <text/>
    </border>
    <spacer/>
</column>

Upvotes: 0

Pete
Pete

Reputation: 58462

You need to add a clear to your spacer:

.spacer {clear: both;}

http://jsfiddle.net/p7mBk/7/

Upvotes: 1

Romain
Romain

Reputation: 1948

I modified your code and floated all the elements. Here is the result: http://jsfiddle.net/p7mBk/3/

CSS

.cf:before, .cf:after{display: table; content: " ";}
.cf:after{clear: both;}
.cf{zoom: 1;}

.mainb{width: 1000px;}
.fleft{float: left; width: 300px;}
.fright{float: left; width: 300px;}
.midcol{float: left;width:310px;}
.fleft, .fright, .midcol{border: 1px solid red;}
.spacer{border: 1px solid gray; border-top: 0; background: blue; height: 2px; margin: 0 12px;}

HTML

<div class="mainb cf">
    <div class="fleft">
        <h3>Latuis Congue Estaer</h3>
        <img src="" alt="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>
    <div class="fright">
        <h3>Latuis Congue Estaer</h3>
        <img src="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>

    <div class="midcol">
        <h3>Latuis Congue Estaer</h3>
        <img src="" />
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
        <p class="alt"><a href="#">More</a></p>
        <div class="spacer"></div>
    </div>
</div>

It may be what you want.

Upvotes: 0

The Mechanic
The Mechanic

Reputation: 2329

Here is the solution to what you want to achieve. I just modified your CSS and HTML. Check this fiddle: http://jsfiddle.net/sarfarazdesigner/p7mBk/5/

CSS

.cf:before, .cf:after {
    display: table;
    content: " ";
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}
.mainb {
    width: 1000px;
}
.fleft {
    float: left;
    width: 300px;
}
.fright {
    float: right;
    width: 300px;
}
.midcol {
    margin: 0 310px;
}
.cmnbrd {
    border: 1px solid red;
    margin-bottom:20px;
}
.spacer {
    border: 1px solid gray;
    border-top: 0;
    background: blue;
    height: 2px;
    margin: 0 12px;
}

And the HTML is

<div class="mainb cf">
    <div class="fleft">
        <div class="cmnbrd">
            <h3>Latuis Congue Estaer</h3>
            <img src="" alt="" />
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
            <p class="alt"><a href="#">More</a></p>
        </div>
        <div class="spacer"></div>
    </div>
    <div class="fright">
        <div class="cmnbrd">
            <h3>Latuis Congue Estaer</h3>
            <img src="" />
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
            <p class="alt"><a href="#">More</a></p>
        </div>
        <div class="spacer"></div>
    </div>
    <div class="midcol">
        <div class="cmnbrd">
            <h3>Latuis Congue Estaer</h3>
            <img src="" />
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue blandit diam sed ullamcorper. Morbi vitae metus a purus rhoncus egestas ac sit amet velit. Sed ac eros eu tellus adipiscing consectetur a ut mi. Nunc imperdiet pretium metus ac auctor. </p>
            <p class="alt"><a href="#">More</a></p>
        </div>
        <div class="spacer"></div>
    </div>
</div>

Upvotes: 1

Related Questions