Reputation: 317
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
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
Reputation: 1948
I modified your code and floated all the elements. Here is the result: http://jsfiddle.net/p7mBk/3/
.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;}
<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
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/
.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