css - Connect two elements keeping responsive value -

i creating simple real estate website , creating listing page. product similar here. cannot gain ideas code because using skeleton framework. current progress , code or below.

the 2 elements; photo of property , body of text apart (there's gap in middle).
, if resize browser listing not rendered vertical rectangle supposed to.

my raw questions are:
1) how connect image , body text there no space inbetween?

2) how make body text , image same width when body text needs collapse underneath photo? (when resizing browser or on device)

the html

    <div class="five columns image">   <a href="properties/9-walter-street-claremont/walter-street.html"><img src="properties/9-walter-street-claremont/listing.jpg" alt="listing"></a> </div> <div class="ten columns body-info">   <h2><a href="properties/9-walter-street-claremont/walter-street.html">walter street <span>$2500/wk</span></a></h2>   <h3>claremont, 6010</h3>   <p>lorem ipsum</p>   <div class="info">     <ul>       <li><img src="img/bedrooms.png"> 5</li>       <li><img src="img/bathrooms.png"> 3</li>     </ul>   </div> </div> 

the css

   .body-info  {     background-color: #fff;     height: 200px;     -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);     -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);     box-shadow: 0px 1px 1px rgba(0,0,0,0.1);     margin-bottom: 30px;     padding: 0px; } .image img:hover { background-color: rgba(0,0,0,0.5); background-image: url("img/eye.png"); background-position: center center; background-repeat: no-repeat; }  .body-info h2 {     transition: color 0.2s ease-in;     -webkit-transition: color 0.2s ease-in;     color: #428f9c;     font-size: 23px;     font-weight: normal; } .image {     width: 270px;     float: left; } .body-info {     margin-left: 280px; } .body-info h2 a:hover {     color: #0b7587; } .body-info span {     margin-right: 15px;     color: #444; } .body-info p {     color: #777;     font-size: 16px; } .body-info ul {     list-style: none; } .body-info ul li {     color: #777; } 

thank in advance!

to little bit on way, use @media on css.

with can change style when example screen smaller specific width.

html:

<div class="wrap">     <div class="image">img</div>     <div class="info">info</div> </div> 

css:

.wrap {     background: gray;     min-height: 200px;     padding: 10px; } .image {     width: 270px;     height: 180px;     background: lightgray;     display: inline-block; } .info {     background: lightsteelblue;     display: inline-block; } @media screen , (max-width:600px){     .image, .info {         width: 100%;         display: block;     } } 

so style when have fullscreen shows .image , .info next each other (using display: inline-block;. when screen gets resized , smaller 600px, both divs display property change block, making them appear under each other.

jsfiddle demo

referring example in post, thing need make or find script resizes image when screen gets smaller.

hope helps you.