Remove the empty space present below the image - html

Question

we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.

Answer 1

Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.

Answer 2

trying to make img:
line-height: 0;
vertical-align: top or bottom;

Answer 3

You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}

Answer 4

Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}