Connect two elements keeping responsive value - css

Question

I am creating a simple real estate website and am currently creating the listing page. I would like a product very similar to this here. I cannot gain ideas from the code because I am using the skeleton framework. This is my current progress and code or below.
The two elements; photo of property and body of text are apart (there's a gap in the middle).
And also if you resize the browser the listing is not rendered as a vertical rectangle as it is supposed to.
My raw questions are:
1) How do I connect the image and the body text so there is no space inbetween?
2) How do I make the body text and image the same width when the body text needs to collapse underneath the photo? (When resizing browser or on device)
The HTML
<div class="five columns image">
<img src="Properties/9-Walter-Street-Claremont/Listing.jpg" alt="Listing">
</div>
<div class="ten columns body-info">
<h2>Walter Street <span>$2500/wk</span></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 a 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 a {
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 you in advance!

Answer 1

To help you a little bit on the way, you could use the #media on CSS.
With that you can change the style when for example the screen is smaller than a 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 only screen and (max-width:600px){
.image, .info {
width: 100%;
display: block;
}
}
So what the style does is when you have a fullscreen it shows .image and .info next to each other (using display: inline-block;.
When the screen gets resized and smaller than 600px, for both the divs the display property will change to block, making them appear under each other.
JSFiddle DEMO
Referring to the example in your post, the only thing you need to do is to make or find a script that resizes your image when the screen gets smaller.
Hope this helps you.