Skip to content

Instantly share code, notes, and snippets.

Created Sep 17, 2014
Embed
What would you like to do?
A Pen by Captain Anonymous.
<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-->
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment