help with css on border image

Question

I'm trying to create borders with images, and I'm almost there, but the left and right divs aren't quite right. The left one is under the TL, which is bad, and the right one floats under it for some reason and makes the bottom stuff all shifted over. I could attach an example if I knew a good site to put sample stuff on (don't want to give away my url)

html

<div id="text">
 <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
 <div class="left"></div><div class="content"></div><div class="right"></div>
 <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

css

  .tl {  

      background: url(corner1.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .tm {  
      width: 352px;  
      height: 59px;  
      background: url(top.png) repeat-x;
      float: left;  
      }  

  .tr {  

      background: url(corner2.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .content {  
      padding: 0 5px;  
      width: 360px;  
     float: left 
      }  

  .bl {    
      background: url(corner4.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .bm {  
      width: 352px;  
      height: 58px;   
      background: url(bottom.png) repeat-x;
      float: left;  
      }  

  .br {  
      background: url(corner3.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

 .left {background: url(left.png) repeat-y; width: 58px; height: 100%}
 .right {background: url(right.png) repeat-y; width: 58px; float: left; height: 100%}

Answer 1

I didn't look really hard, but a few things I noticed that should help you get closer to a solution:

you .left does not have a float attribute, and I imagine that it should float:left.

The other thing you should do in the tr, you should put a clear:right, so you are guaratneed that the next div is below it.

You should do the same thing for the .right div as well.

Check out the clear css property.

Also, make your heights consistent. tl, tm, and tr have different heights. For troubleshooting purposes, you should make them all the same.

Answer 2

I would suggest avoiding floats, and instead using absolute positioning. So something like...

#text{position:relative;padding:60px}
.tl,.tm,.tr,.bl,.bm,.br,.left,.right{position:absolute}
.tl{top:0;left:0}

...and so on down to...

.br(right:0;bottom:0} 

Answer 3

I don't see a difference.

<div id="text">
    <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
    <div class="left"></div><div class="content"></div><div class="right"></div>
    <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

vs

<table cellpadding="0" cellspacing="0">
    <tr><td class="tl"></td><td class="tm"></td><td class="tr"></td></tr>
    <tr><td class="left"></td><td class="content"></td><td class="right"></td></tr>
    <tr><td class="bl"></td><td class="bm"></td><td class="br"></td></tr>
</table>

If you're going to abuse tags use the ones that work.

You could also use...

<style type="text/css">
.tl {background:url('tl.GIF') no-repeat left top;}
.tr {background:url('tr.GIF') no-repeat right top;}
.bl {background:url('bl.GIF') no-repeat left bottom;}
.br {background:url('br.GIF') no-repeat right bottom;}
.t {background:url('t.GIF') repeat-x left top;}
.b {background:url('b.GIF') repeat-x left bottom;}
.l {background:url('l.GIF') repeat-y left top;}
.r {background:url('r.GIF') repeat-y right top;}
</style>

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="br">
   content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You don't need to be this verbose. I've gotten good results with just the .lt and .br DIVs with large images.