I am currently working on developing a responsive website. The layout includes a picture on the left side, main content in a div on the right side, and additional content below the picture (view screenshot here). I want the main content to be the same height as the photo and the div below it. Setting fixed heights in pixels is not ideal for responsiveness, so I attempted using percentages without success. Here is the code, any help would be greatly appreciated (I'm new to this).
HTML:
<div class="content">
<div class="photo-column" style="height: auto;">
<div class="imageBox">
<img src="images/rikkertCC.jpg" alt="">
</div>
<div class="tekstBallon">
<a href="#portolio">
<div class="triangle"></div>
<div class="tb-cnt">
<p>More text goes here...</p>
</div>
</a>
</div>
</div>
<div class="tb-cnt-main">
<h2>About Us</h2>
<p class="postInfo"><b>Is this necessary?</b></p>
<p>Description of the company and its goals...</p>
</div>
</div>CSS:
.content {
width: 80%;
clear: both;
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
}
.photo-column{
width: 33.333333%;
height: 300px;
float: left;
}
.imageBox {
height:auto !important;
max-height: 90%;
width: 96%;
}
.tekstBallon {
display: inline-block;
background-color: #26a0da;
float:left;
height: auto;
max-height: 16%;
width: auto;
max-width: 96%;
margin-top:3.3%;
}
.triangle{
position: initial;
height: 15px;
width: 25px;
margin-left:5%;
background-color:#26a0da;
}
.tb-cnt-main{
padding: 3% 4%;
color:#FFF;
font-family: Segoe ui;
display: inline-block;
background-color: #323232;
width: 58.6%;
float:right;
}