html - How do I interrupt a div's border with an image? -

i have 3 responsively sized divs in grid need have border-top interrupted image. once i've figured out how interrupt top border image, i'll same thing bottom border white square. desired effect shown in screenshot: https://ia601903.us.archive.org/20/items/screenshot20131007at12.30.32/practivate-mockup.png

however, closest i've managed far this: https://ia601903.us.archive.org/20/items/screenshot20131007at12.30.32/screen%20shot%202013-10-07%20at%2012.30.32.png

the problem absolute positioning breaks flow of page, work around if fixed width, it's responsive (built in foundation 4) widths unknown. know how without absolute positioning?

here's code i'm using (inline style there make reading easier on website, not present in real code):

<div class="row" id="about">     <div class="large-4 columns centered" id="entrepreneurs">       <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">               <img src="img/white/guitar.png" style="position: absolute; top: -89px;">       <h2 class="subheader"> entrepreneurs </h2>           <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse venenatis quam, et sagittis quam. aenean vehicula euismod ipsum, eget blandit libero auctor nec. aenean pharetra sapien nec risus euismod mattis. vestibulum volutpat tincidunt blandit. curabitur dapibus ultrices arcu luctus condimentum. morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. nulla eget purus ut nunc lacinia dignissim. vestibulum feugiat porta cursus. curabitur posuere mollis massa quis mollis. suspendisse ac luctus est, nec vestibulum dolor.</p> </div></div>       <div class="large-4 columns centered" id="corporates">             <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">         <img src="img/white/cloud.png" style="position: absolute; top: -89px">        <h2 class="subheader"> corporates </h2>       <p> consectetur adipiscing elit. suspendisse venenatis quam, et sagittis quam. aenean vehicula euismod ipsum, eget blandit libero auctor nec. nulla eget purus ut nunc lacinia dignissim. vestibulum feugiat porta cursus. curabitur posuere mollis massa quis mollis. suspendisse ac luctus est, nec vestibulum dolor. suspendisse potenti. vivamus egestas vestibulum ante egestas adipiscing. in hac habitasse platea dictumst. etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.</p> </div></div>      <div class="large-4 columns centered" id="results">             <div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative">       <img src="img/white/drinks.png" style="position: absolute; top: -89px">       <h2 class="subheader"> results </h2>             <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse venenatis quam, et sagittis quam. aenean vehicula euismod ipsum, eget blandit libero auctor nec. aenean pharetra sapien nec risus euismod mattis. vestibulum volutpat tincidunt blandit. curabitur dapibus ultrices arcu luctus condimentum. morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. nulla eget purus ut nunc lacinia dignissim. vestibulum feugiat porta cursus. curabitur posuere mollis massa quis mollis. suspendisse ac luctus est. </p>   </div></div>   </div> 

any thoughts appreciated. should question that's useful more folks me - unless problem here i'm new this.

one potential solution use negative margins move content right place.

html:

<div class="column">     <img class="column-image" src="http://placekitten.com/100/100">     <h2>for entrepeneurs</h2>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc hendrerit vulputate ante ac ornare. suspendisse quis nisl vitae nisl fringilla imperdiet. fusce non porta mauris. pellentesque dapibus lectus ut felis pellentesque facilisis. aenean condimentum porta aliquet. duis luctus nisl non metus ornare, id volutpat turpis sodales. maecenas @ augue sed augue auctor laoreet non nec turpis. suspendisse eu lacinia ligula. vestibulum est dui, egestas @ purus vitae, semper pulvinar leo. fusce vitae placerat turpis. mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. donec posuere lectus orci semper, nec lacinia felis consectetur. fusce id consequat lectus. donec sed erat commodo, feugiat ligula vel, posuere augue. integer id tempor massa.</p>     <div class="column-footer-fix"></div> </div> <div class="column">     <img class="column-image" src="http://placekitten.com/100/100">     <h2>for entrepeneurs</h2>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc hendrerit vulputate ante ac ornare. suspendisse quis nisl vitae nisl fringilla imperdiet. fusce non porta mauris. pellentesque dapibus lectus ut felis pellentesque facilisis. aenean condimentum porta aliquet. duis luctus nisl non metus ornare, id volutpat turpis sodales. maecenas @ augue sed augue auctor laoreet non nec turpis. suspendisse eu lacinia ligula. vestibulum est dui, egestas @ purus vitae, semper pulvinar leo. fusce vitae placerat turpis. mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. donec posuere lectus orci semper, nec lacinia felis consectetur. fusce id consequat lectus. donec sed erat commodo, feugiat ligula vel, posuere augue. integer id tempor massa.</p>     <div class="column-footer-fix"></div> </div> <div class="column">     <img class="column-image" src="http://placekitten.com/100/100">     <h2>for entrepeneurs</h2>     <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc hendrerit vulputate ante ac ornare. suspendisse quis nisl vitae nisl fringilla imperdiet. fusce non porta mauris. pellentesque dapibus lectus ut felis pellentesque facilisis. aenean condimentum porta aliquet. duis luctus nisl non metus ornare, id volutpat turpis sodales. maecenas @ augue sed augue auctor laoreet non nec turpis. suspendisse eu lacinia ligula. vestibulum est dui, egestas @ purus vitae, semper pulvinar leo. fusce vitae placerat turpis. mauris dignissim, ipsum ac placerat mollis, nulla mauris dignissim justo, porttitor viverra nisl massa et orci. donec posuere lectus orci semper, nec lacinia felis consectetur. fusce id consequat lectus. donec sed erat commodo, feugiat ligula vel, posuere augue. integer id tempor massa.</p>     <div class="column-footer-fix"></div> </div> 

css:

.column {     border: 5px solid #06c;     float: left;     margin-right: 10px;     margin-top: 50px;     text-align: center;     width: 20%; }  .column-image {     margin-top: -50px; }  .column-footer-fix {     background-color: #fff;     display: inline-block;     height: 25px;     margin-bottom: -25px;     width: 100px; } 

jsfiddle example.

a margin added top of column make room image above it. using pseudo elements cleaner using solution.

the bottom part of column kind of hacky, don't have time come better solution.