A Pen by Captain Anonymous.

CEbtq.markdown

CEbtq

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

<div class="featuredcardswrapper">

<div class="featuredmainbox"> 	



<div id="headingbox"><a href=""><font color="white">WANT FEATUREDRIGHTBAR HEIGHT SAME AS FEATURED TEXT</font></a></div> 


<div class="featuredpic1"></div>

<div class="featuredsidebar">
<div class="featuredtext">
<ul>  
     <li>A</li>
     <li> B</li>
     <li>C</li>
     <li>D</li>
     <li>E</li>
     <li>F</li>
  <li>G</li>
     <li>H</li>
     <li>I’m using two div’s side by side with float left and float right, and I need both them of same auto height, can you please let me know how it become possible.

I’ve one div for text and other for Apply now button, but the div for apply now button is not assuming height of text div.

Here is the code I’ve</li>
  <li>J</li>
     <li>Please no mega codedumps. They take up way to much space, are rarely comprehensive and hard to read.

Make a reduced case in Codepen.io and we can see what can be done.

Or your could do a search</li>
</ul>

</div><!--End featuredtext-->

<div class="featuredrightbar"><!--Start featuredrightbar-->
      
          <div id="rightbartexttop"><strong>Editor's Rating:</strong></div>
          <div id="rightbarratings"><img src="/wp-content/uploads/4.5-yellow-stars-blue-bk.gif"/></div> 
          <div class="applynow"><a href=""><img src="/wp-content/uploads/2013/03/apply-now.gif"></a></div>
         <div id="applynowtext">TEXT HERE</div>
         
<div id="rightbottomtext"><p>Credit:</p><p><strong>Good</strong></p></div>


</div><!--End featuredrightbar-->
</div><!--End featuredsidebar-->

<div class="table1">
<table>
<tr>
    <th class="forwidth">Annual Fee</th>
    <th class="forwidth">APR</th>
    <th class="forwidth">Credit </th>
    <th class="forwidth">Grace Period</th>
  </tr>
  <tr>
    <td class="forwidth">$35</td>
    <td class="forwidth">9.90%(variable)</td>
    <td class="forwidth">Bad Credit</td>
    <td class="forwidth">25 Days</td>
  </tr>
  
</table></div>

</div><!--featuredmainbox-->
</div><!--End featuredcardswrapper-->

style.css

.featuredcardswrapper{
width:100%;
height:auto;
}

.featuredmainbox
{
width:700px !important;
height:auto;
background-color:#47AA5F;
float: left;
margin-left: 115px;
margin-top: 100px;
border:groove 2px cadetblue;
margin-bottom:50px;
}

#headingbox{
width:515px;
height:20px;
margin-top:10px;
margin-left:9px;
font-size:18px;
color:#FFFFFF;
}

.featuredpic1{
width:215px;
height:136px;
background-image:url(/wp-content/uploads/Open-Sky-Visa-215-136.jpg);
background-repeat: no-repeat !important;
margin-top: 29px;
margin-left: 9px;


-webkit-box-shadow: 1px 3px 2px 2px #137A0F;
  -moz-box-shadow:    1px 3px 2px 2px #137A0F;
  box-shadow:         1px 3px 2px 2px #137A0F;
border:thick 1px #000066;
border-radius: 9px;
}

.featuredsidebar{
width: 470px;
height: auto;
float: right;
position: static;
margin-top: -135px;
}

.featuredtext{
width: 300px;
height: auto;
float: left;
color: #FFFFFF;
}


.featuredrightbar{
width: 165px;
height: 100%;
background-color: #B6CE59;
float: right;
border-left: solid 2px #666666;
padding-bottom:89px;

}


#rightbartexttop{
width: 119px;
height: 20px;
margin-left: 23.5px;
margin-top: 60px;
font-size:16px;
text-align:center;
}

#rightbarratings{
width: 74.4px;
height: 18px;
margin-left: 46px;
margin-top: 9px;

-webkit-box-shadow: 0px 3px 2px 0px #090707;  
  -moz-box-shadow:    0px 3px 2px 0px #090707;
  box-shadow:         0px 3px 2px 0px #090707;
}

.applynow
{
width:155px;
height:41px;
margin-left: 6px;
margin-top: 29px;
background-image:url(/wp-content/uploads/2013/03/apply-now.gif);
background-repeat:no-repeat;
text-align:center;
border:#FFFFFF solid 2px;
border-radius:9px;
position:absolute;
}

.applynow:hover {
width:155px;
height:41px; 
border:solid 4px #000033;
border-radius: 9px;
margin-left: 5px;
border:#FFFFFF solid 3px;
border-radius:9px;
position:absolute;
 } 
 
 
#applynowtext{
width:155px;
height:50px;
margin-top: 85px;
margin-left: 6px;
text-align:center;
color:#000000;
}

#rightbottomtext{
width:155px;
height:70px;
margin-left: 7px;
margin-top: 30px;
text-align:center;
font-size:16px;
color:#000000;
}

#rightbottomtext:hover { 
background-color:#000033;
-moz-box-shadow: 0 0 1px #ccc; 
-webkit-box-shadow: 0 0 1px #ccc; 
box-shadow: 0 0 10px #ccc; 
border:dashed 1px white;
border-radius: 9px;
color:#FFFFFF;
margin-left:6px;
} 


.table1{
width:100%;
height:auto;
float: left;
}
table, th, td {
    border: 1px solid black;
	border-collapse:collapse;
			}
th, td {
text-align:center;
}	

td{
color:#000000;
}	
th
{
background-color:#257E19;
height:25px !important;
color:#FFFFFF;
}
			
.forwidth{
width:5% !important;
border:thin 2px #000000;
}