Home/ Questions/Q 603221
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T16:54:26+00:00

I’m trying to create borders with images, and I’m almost there, but the left

  • 0

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%}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0