Responsive Image and Text side by side

Question

I'm trying to make 2 columns:

The first is an image taking 50% of the page and the other would be a text box taking the remaining 50% of the page. No margins.

Is it possible to have something like this that's responsive? I'm struggling to get the background colour to line up with the image.

 .imagebox { width: 50%; float: left; } .textbox { width: 50%; float: right; text-align: center; padding-top: 20px; background-color: #666; color: #fff; }

 <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox"> <h2>Title Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="#">Read More</a> </div>

Answer 1

Here the first half is an <img> and the second is a <textbox>

https://jsfiddle.net/b8ow0noy/1/

The code from the link is here

<div style="width: 50%; float:left">
<img src="https://www.w3schools.com/css/trolltunga.jpg">
</div>

<div style="width: 50%; float:right">
<textbox>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   #right content in there<br>
   </textbox>
</div>

css:

div{
  margins:0 px;
  overflow:hidden;
}

Answer 2

Wrap your .textbox inside a container (in my case the class of the container is .textbox-cont). Give imagebox and textbox-cont a fixed height. Remove floating property from textbox apply it to the .textbox-cont. Now position both the image and the textbox relative to the .imagebox and .textbox-cont respectively. Use position absolute for img and .textbox and position it 50% from the top of their container like so:

.imagebox img{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.textbox{
  background-color: #666;
  color: #fff;
  position:absolute;
  text-align: center;
  width:100%;
  top:50%;
  transform:translateY(-50%);
 }

This will do the trick. Also if you want to make it responsive use media queries like so:

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont{
    width:100%;
    height:200px;
   }
}

Play around with the breakpoint (max-width) and change it to whatever suits you best. Also change the box-sizing property of every element to border-box like so to fix any margin or padding issue:

*{
  box-sizing:border-box;
}

Final snippet :

 *{ box-sizing:border-box; } .imagebox { width: 50%; float: left; height:300px; position:relative; } .imagebox img{ position:absolute; top:50%; transform:translateY(-50%); overflow:hidden; } .textbox-cont { width: 50%; height:300px; float: right; position:relative; overflow:hidden; } .textbox{ background-color: #666; color: #fff; position:absolute; text-align: center; width:100%; padding:20px; top:50%; transform:translateY(-50%); } @media only screen and (max-width: 700px) { .imagebox, .textbox-cont{ width:100%; height:200px; } }

 <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox-cont"> <div class="textbox"> <h2>Title Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a href="#">Read More</a> </div> </div>

if you want to read about box-sizing:border-box check this out => https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

here is a great article on responsive webdesign : https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Answer 3

The following answer is responsive but at small widths the image will be very narrow and probably cropped too much. At a certain breakpoint you might want to convert the side-by-side layout to a stacked single column.

 .wrap { display: flex; } .wrap>* { flex: 1; } .imagebox { position: relative; } img { width: 100%; height: 100%; object-fit: cover; } .textbox { padding: 1rem; background-color: #666; color: #fff; }

 <div class="wrap"> <div class="imagebox"> <img src="http://www.mokshasoulyoga.com/wp-content/uploads/2017/04/5.png" width="100%" height="auto" /> </div> <div class="textbox"> <h2>Title Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="#">Read More</a> </div> </div>