html page missing the alignment in every iteration in Django Template

html page missing the alignment in every iteration in Django Template - html

I have an HTML for cricket fixtures where I need to iterate it through the data in models. If I add a different div tag of the same content in the next line it gets aligned properly but when I'm generating the models data I see the alignment is changed to every iteration. It looks like the image shown here
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'css/fixture.css' %}">
</head>
<body>
</header>
<div class="page">
<div id="fb-root"></div>
<div id="page-wrapper" class="container" style="display:inline-block;">
<div id="shosh" class="ad-unit shosh-embed" style="height:0; width:980px; text-align:center;"></div>
<div style="margin-top:5px;"></div>
{% for fixture in fixtures %}
<div class="cb-bg-white cb-schdl cb-col cb-col-100">
<h1 class='cb-schdl-hdr cb-font-24 line-ht30'>Cricket Schedule</h1>
<div id="international-list" class="cb-bg-white">
<div class="cb-col-100 cb-col">
<div class="cb-lv-grn-strip text-bold">{{fixture.date}}</div>
<div class="cb-col-100 cb-col">
<div class="cb-col-33 cb-col cb-mtchs-dy text-bold">West Indies tour of England, 2020 (Postponed)</div>
<div class="cb-col-67 cb-col">
<div class="cb-ovr-flo cb-col-60 cb-col cb-mtchs-dy-vnu cb-adjst-lst"> England vs West Indies, 1st Test, Day 1
<div class="cb-font-12 text-gray cb-ovr-flo">Kennington Oval, London</div>
</div>
<div class="cb-col-40 cb-col cb-mtchs-dy-tm cb-adjst-lst"> <span class="schedule-date" timestamp="1591264800000" venue="+01:00" format="h:mm a"></span>
<div class="cb-font-12 text-gray"> <span>10:00 AM</span> GMT /<span> 11:00 AM</span> LOCAL </div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background: #E3E6E3;
font-family: helvetica, "Segoe UI", Arial, sans-serif;
color: #222;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
body,
.cb-comm-pg,
.cb-hm-mid {
min-height: 1000px
}
.container {
width: 980px;
margin: 0 auto;
}
.page {
max-width: 980px;
margin: 0 auto;
position: relative;
}
.cb-col-8 {
width: 8%;
}
.cb-col-10 {
width: 10%;
}
.cb-col-14 {
width: 14%;
}
.cb-col-16 {
width: 16%;
}
.cb-col-20 {
width: 20%;
}
.cb-col-25 {
width: 25%;
}
.cb-col-27 {
width: 27%;
}
.cb-col-33 {
width: 33%;
}
.cb-col-40 {
width: 40%;
}
.cb-col-46 {
width: 46%;
}
.cb-col-47 {
width: 47%;
}
.cb-col-50 {
width: 50%;
}
.cb-col-60 {
width: 60%;
}
.cb-col-66 {
width: 66%;
}
.cb-col-67 {
width: 67%;
}
.cb-col-73 {
width: 73%;
}
.cb-col-75 {
width: 75%;
}
.cb-col-84 {
width: 84%;
}
.cb-col-80 {
width: 80%;
}
.cb-col-90 {
width: 90%;
}
.cb-col-100 {
width: 100%;
}
.cb-col {
display: inline-block;
box-sizing: border-box;
float: left;
min-height: 1px;
}
h1 {
font-size: 36px;
line-height: 42px;
margin: 0;
}
h2 {
font-size: 24px;
margin: 0;
line-height: 30px;
}
h3 {
font-size: 18px;
line-height: 24px;
margin: 0;
}
h4 {
font-size: 16px;
margin: 0;
}
h5 {
font-size: 14px;
margin: 0;
}
.cb-font-18 {
font-size: 18px;
}
img {
border-radius: 4px;
}
a {
text-decoration: none;
color: #222;
}
a,
a:hover,
a:active,
a:focus {
outline: medium none;
}
.text-center {
text-align: center;
}
.cb-nws-lft-col {
padding: 15px 20px;
}
.cb-nws-dtl-lft-col {
padding: 10px 30px 0 30px;
border-right: 1px solid #ecebeb;
}
.cb-nws-lst-rt {
padding-left: 10px;
}
.cb-srs-lst-itm {
padding: 10px 0;
}
.cb-lst-itm-sm {
padding: 10px 0 5px;
}
.cb-scrd-lft-col {
padding: 15px 10px;
}
.cb-col-rt {
padding: 10px;
}
.text-white {
color: #fff;
}
.cb-scrd-hdr-rw,
.cb-nav-pill-1.active {
background: #028062;
color: #fff;
}
.cb-nav {
position: relative;
height: 48px;
background: #009270;
}
.cb-hm-mnu-itm {
padding: 16px 6px 11px;
color: #fff;
display: inline-block;
}
.cb-hm-text {
padding: 10px 18px 10px 20px;
}
.cb-hm-rght {
padding: 15px;
}
.cb-subnav .cb-sub-navigation {
display: none;
position: absolute;
}
.cb-mat-mnu {
background: #4a4a4a;
width: 980px;
font-size: 0;
}
.cb-mat-mnu-itm {
font-size: 12px;
color: #fff;
padding: 10px;
cursor: pointer;
display: inline-block;
max-width: 140px;
}
.cb-mat-mnu-ttl {
background: #333;
padding: 10px 20px;
}
.cb-mat-mnu-wrp {
margin-bottom: 10px;
}
.cb-ovr-flo {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cb-mat-mnu-all {
text-align: center;
float: right;
width: 60px;
}
.cb-nav-main {
border-bottom: 1px solid #e3e6e3;
padding: 0 0 5px 20px;
}
.cb-nav-bar {
padding-top: 10px;
clear: both;
}
.cb-lst-itm,
.cb-bg-white {
background: #fff;
}
.cb-nav-tab.active,
.cb-nav-tab-hm.active {
font-weight: bold;
color: #028062;
}
.cb-nav-tab.active {
border-bottom: 3px solid #028062;
line-height: 24px;
}
.cb-nav-tab-hm.active {
border-bottom: 2px solid #028062;
line-height: 22px;
}
.cb-nav-tab {
margin-right: 20px;
padding-bottom: 6px;
}
.cb-nav-tab-hm {
margin-right: 15px;
padding-bottom: 6px;
}
.cb-nav-hdr {
padding-top: 15px
}
.cb-nav-subhdr {
padding: 5px 0 10px 0;
}
.cb-lv-scr-mtch-hdr {
line-height: 21px;
font-size: 16px;
}
.disp-none {
display: none;
}
.disp-blck {
display: block;
}
.cb-font-24 {
font-size: 24px;
}
.line-ht30 {
line-height: 30px;
}
.line-ht24 {
line-height: 24px;
}
.cb-hm-scg-blk {
background: #fff;
margin-bottom: 5px;
height: 90px;
}
.mrgn-btm-5 {
margin-bottom: 5px;
}
#scagTabContent .show {
display: block;
visibility: visible;
}
#scagTabContent .hide {
display: none;
visibility: hidden;
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.cb-hm-lft {
margin-bottom: 5px;
padding: 0 15px;
}
.cb-hm-lft-hdr {
margin: 0;
padding: 15px 15px 0;
color: #009270;
}
.cb-hm-mid {
border-left: 5px solid #e3e6e3;
border-right: 5px solid #e3e6e3;
padding: 0 15px;
}
.cb-mtch-blk {
border-right: 1px solid #ecebeb;
line-height: 1.4;
margin: 15px 0;
padding: 0 20px;
}
.crd-cntxt {
font-size: 12px;
color: #666;
padding-bottom: 10px;
}
.big-crd-main {
border-top: 1px solid #ecebeb;
padding: 15px 0 5px;
margin-bottom: 1px;
clear: both;
}
.big-crd-reltd-itm {
margin: 0 0 10px;
width: 100%;
display: inline-block;
}
.cb-nws-time {
font-size: 12px;
padding-bottom: 5px;
}
.cb-nws-hdln-ancr {
padding-bottom: 5px;
}
.cb-hmscg-bwl-txt,
.cb-hmscg-bat-txt {
font-weight: bold;
padding-bottom: 4px;
height: 18px;
}
.cb-hmscg-bwl-txt {
color: #666;
}
.sml-crd-main {
padding: 15px 0 5px;
width: 100%;
}
.big-crd-hdln {
margin: 10px 0;
}
.big-crd-rltd-txt {
font-weight: bold;
margin: 10px 0;
color: #1866DB;
}
.cb-nws-intr {
color: #666;
padding-bottom: 5px;
}
.cb-lv-scrs-well {
background: #f5f5f5;
display: inline-block;
margin: 10px 0;
padding: 10px 5px;
}
.cb-hm-mtch-crd-width {
min-width: 300px;
}
.cb-mr-30 {
margin-right: 30px;
}
.cb-pretag {
color: #B34A57;
}
.cb-schdl-hdr {
margin: 0;
padding: 15px 0 10px 10px;
}
.cb-lst-itm-lg {
padding: 20px 0;
}
.cb-left-pad {
padding: 20px 10px 0;
}
.cb-nav-pill-1 {
background: #CFE0DB;
border-radius: 20px;
color: #222;
cursor: pointer;
margin-right: 15px;
padding: 5px 20px;
}
.cb-mtch-lst {
padding: 15px 0;
}
.cb-nws-min-cntr {
padding: 10px;
background: #f5f5f5;
color: #333;
margin: 10px 0 15px;
}
.sml-crd-subtxt {
margin: 0 10px 10px;
}
/*-------------------------Live Pages -----------------------*/
.cb-scrcrd-status {
padding: 0 0 10px 10px;
}
.cb-scrd-hdr-rw {
padding: 8px 10px;
}
.cb-bg-gray {
background: #ecebeb;
}
.cb-lv-grn-strip {
background: #ecebeb;
}
.cb-min-hdr-rw,
.cb-scrd-sub-hdr {
padding: 4px 10px;
font-size: 12px;
color: #666;
}
.cb-scrd-itms {
padding: 4px 10px;
font-size: 13px;
}
.cb-text-link {
color: #1866DB;
}
.text-bold {
font-weight: bold;
}
.text-normal {
font-weight: normal;
}
.cb-mat-fct-itm {
padding: 5px 0;
}
.cb-min-bat-rw {
padding-bottom: 5px;
}
.cb-nws-sub-txt,
.cb-nws-sub-txt,
.cb-font-12 {
font-size: 12px;
}
.cb-font-16 {
font-size: 16px;
}
.cb-font-20 {
font-size: 20px;
}
.cb-min-inf {
padding-top: 10px;
margin-left: -10px;
display: inline-block;
}
.cb-min-itm-rw {
padding: 5px 10px 0;
}
.text-right {
text-align: right;
}
.cb-key-st-lst {
padding: 10px 0 0 5px;
}
.cb-min-prw-time {
padding: 20px 0 0;
}
.cb-toss-sts {
padding: 10px 0 30px;
}
.cb-min-rcnt {
padding: 7px 10px;
margin: 0 -10px 0;
}
.cb-key-lst-wrp {
border: 1px solid #ecebeb;
padding-bottom: 15px;
margin-right: -10px;
}
.cb-min-tm {
font-size: 18px;
font-weight: bold;
}
.cb-min-stts {
padding: 20px 0;
}
.cb-mom-itm {
padding: 0 0 10px;
}
.cb-lv-grn-strip {
padding: 10px 10px 5px;
}
.cb-ovr-num {
padding-top: 2px;
}
.cb-min-pad {
padding-left: 5px;
}
/*Upcoming Series*/
.cb-mnth {
margin-top: 10px;
padding: 0 10px;
}
.cb-sch-lst-itm {
padding: 10px 0;
margin-left: 20px;
border-bottom: 1px solid #ecebeb;
}
/*Matches By Day*/
.cb-mtchs-dy {
padding: 20px 20px 20px 10px;
}
.cb-mtchs-dy-tm,
.cb-mtchs-dy-vnu {
padding: 20px 20px 20px 0px;
}
/*Schedule Teams*/
.cb-lv-upcom-strip {
padding: 5px 10px;
background: #ecebeb;
}
/*Archives*/
.cb-srs-cat {
padding: 10px;
color: #028062;
}
.pad-left {
padding-left: 30px;
}
.cb-arcv-yr {
font-size: 20px;
padding: 0 0 5px 10px;
font-weight: bold
}
.cb-yr-tmline {
padding: 2px 15px 15px 0;
}
.cb-sch-tms-widgt {
padding: 5px 10px;
margin: 5px 2px 2px 2px;
background: #f5f5f5;
border-radius: 0;
border: 0;
display: inline-block;
}
/*Photos*/
.cb-thmb-dark {
background: #333333;
box-shadow: none;
border-radius: 4px;
border: none;
padding: 0;
color: #CCC;
}
.cb-pht-main {
padding: 20px 15px;
margin: 0 -10px;
}
.cb-pht-block {
padding: 9px;
float: left;
height: 280px;
box-sizing: border-box;
}
.cb-gallery-pht-block {
padding: 9px 9px 9px 16px;
}
.img-responsive {
height: auto;
max-width: 100%;
}
.center-block {
margin-right: auto;
margin-left: auto;
}
.cb-schdl {
padding: 0 10px;
line-height: 1.5;
}
.cb-caret-up,
.cb-caret-down {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
margin-bottom: 1px;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.cb-caret-up {
border-bottom: 4px solid;
}
.cb-caret-down {
border-top: 4px solid;
}
.cb-hm-rt-itm {
margin: 0 0 5px;
padding: 10px 10px 5px;
}
.cb-hmscg-tm-nm {
display: inline-block;
width: 60px;
}
.pull-right,
.cb-all-mtch-tab {
float: right;
}
.cb-skin-ads-close {
display: none;
}
.cb-nws-sub-txt {
padding-top: 10px;
}
.nws-dtl-hdln {
margin-top: 10px;
}
.cb-min-lv {
min-height: 270px
}
.cb-min-comp {
min-height: 150px;
}
.cb-ttl-vts {
margin-top: 20px;
}
.cb-poll-radio {
width: 5%;
margin: 4px 10px 0 0;
}
.cb-mini-tim {
padding-bottom: 20px;
}
.cb-com-ln {
margin: 0 0 10px;
line-height: 24px;
}
.cb-comm-static {
min-height: 31px;
margin: 0 -10px 10px;
}
.cb-com-ovr-sum-ad {
min-height: 31px;
}
.cb-comm-static-anchr {
margin: 5px 10px;
display: block;
}
.ad-unit-rendered {
margin-bottom: 5px;
}
.cb-mm-wrp {
max-height: 0px;
-webkit-transition: max-height 0.35s ease;
transition: max-height 0.35s ease;
overflow: hidden;
}
.cb-mm-wrp.down {
max-height: 1000px;
transition: max-height 0.75s ease;
-webkit-transition: max-height 0.75s ease;
overflow: hidden;
}
.cb-srs-hstry-dtl {
padding: 10px 15px;
margin-top: 20px;
border-radius: 4px;
}
.cb-qck-lnk {
margin-bottom: 5px;
padding: 10px 15px;
}
.cb-qck-hdr {
padding-right: 15px;
border-right: 1px solid #ecebeb;
}
.cb-qck-ancr {
margin-left: 15px;
}
.cb-lst-vid-rw {
padding-bottom: 0;
height: 64px;
border: 1px solid #ecebeb;
margin-right: -10px;
}
.cb-auth-img {
border-radius: 100%;
}
.cb-expt-athr {
vertical-align: top;
padding: 5px 0 0 0;
display: inline-block;
font-size: 16px
}
.inline-block {
display: inline-block;
}
.cb-exprt-athr-hdr {
text-align: right;
font-size: 42px;
font-family: bodani;
color: #fff;
padding-right: 15px;
line-height: 44px;
text-transform: uppercase;
}
.cb-exprt-athr-hdr-tag {
text-align: right;
font-size: 24px;
font-family: bodani;
color: #fff;
padding-right: 15px;
font-style: italic;
}
.cb-athr-wgt-wrp {
border: 1px solid #ecebeb;
padding: 15px;
margin-bottom: 20px;
background: #f5f5f5;
}
.cb-exprt-athr-hdr-img {
background: url("/images/harsha-banner.jpg") no-repeat scroll;
height: 80px;
}
.cb-overflow-hidden {
overflow: hidden;
}
/*Videos*/
.cb-vid-sm-ply-api {
color: #fff;
line-height: 34px;
font-size: 18px;
margin-left: 3px;
}
.cb-vid-sml-card-api {
margin-top: 10px;
height: auto;
padding: 0 12px 0 11px;
}
.cb-cat-head-wrap {
padding: 0 12px 0 11px;
}
.cb-cat-head-text {
margin-top: 5px;
line-height: 20px;
}
.cb-more-btn {
padding: 8px 20px;
border-radius: 2px;
color: #fff;
background: #009270;
border: 0;
cursor: pointer;
}
.cb-cat-head-link {
float: right;
padding: 5px 25px;
margin-top: 10px;
border-radius: 4px;
}
.cb-pos-rel {
position: relative;
}
.cb-videos-cat {
border-bottom: 1px solid #ecebeb;
padding: 10px 3px 15px 4px;
}
.cb-cat-head-text-wrap {
float: left;
}
.cb-cat-head-count {
margin: 0;
color: #666;
}
h2.cb-cat-head-text {
font-size: 18px
}
.cb-vid-sml-card-api-head {
font-size: 14px;
font-weight: bold;
line-height: 18px;
max-height: 55px;
margin: 2px 0 5px;
overflow: hidden;
}
.cb-cen {
position: absolute;
top: 50%;
left: 50%;
opacity: .8;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
background: #222;
text-align: center;
height: 35px;
width: 35px;
border-radius: 50px;
}
.cb-cen:hover {
opacity: 1;
}
.padding-handling-errors {
padding: 20px 0px 10px 15px;
border-bottom: 1px solid #ecebeb;
}
.cb-col .cb-align-cen {
float: none;
text-align: center;
padding: 7px 25px;
margin-top: 20px;
}
.cb-align-cen {
padding-top: 10px;
}
.cb-hot-cat {
max-width: 90px;
text-align: center;
padding-right: 0;
}
.cb-hot-cat-img {
width: 72px;
}
.cb-vid-slider-arrs {
position: absolute;
top: 52px;
left: 0;
right: 0;
z-index: 5;
}
.cb-vid-slider-arr {
position: absolute;
z-index: 5;
height: 43px;
width: 43px;
border-radius: 50%;
cursor: pointer;
}
.cb-vid-slider-arr-prev {
display: none;
left: 0;
}
.cb-vid-slider-arr-next {
right: 0;
}
.videos-list-carousal {
overflow: hidden;
position: relative;
height: 220px;
}
.videos-carousal-wrapper {
float: none;
list-style: none;
padding: 0;
margin: 0;
transition: all 0.3s ease;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
}
.videos-carousal-item {
min-width: 25%;
justify-content: center;
align-items: center;
}
.cb-vid-more {
float: right;
color: #2C3E9A;
font-size: 18px;
}
.cb-vid-more:hover {
text-decoration: underline;
}
.cat-vid-carousal {
height: 135px !important;
}
.cat-vid-carousal .videos-carousal-item {
min-width: auto;
}
.cat-vid-carousal .cb-vid-slider-arrs {
top: 24px;
}
.cb-srs-sqd-box {
min-height: 700px;
background: #fff;
}
.cb-float-none {
float: none;
}
.cb-margin-top-10 {
margin-top: 10px;
}
.cb-schdl-nvtb {
margin: 0 0 10px 0;
padding: 10px;
}
.cb-carousal-item-small {
padding: 0 0 0 16px;
}
.cb-carousal-item-small:first-child {
padding-left: 11px;
}
.cb-carousal-item-large {
padding: 0 11px;
}
.cb-carousal-item-small .cb-vid-txt-wrp {
font-size: 12px;
}
.cb-hot-cat .cb-vid-txt-wrp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 40px;
}
.cb-more-video {
float: right;
color: #2C3E9A;
}
.cb-more-video:hover {
text-decoration: underline;
}
.home_video .cb-vid-slider-arrs {
opacity: 0.8;
}
/*Rankings*/
.cb-ranking-nav.active {
line-height: 21px
}
.cb-rank-plyr {
padding-left: 15px
}
.text-left {
text-align: left;
}
.cb-rank-tabs {
padding-left: 10px;
}
.cb-plyr-tbody {
padding: 5px 0;
}
.cb-padding-left0 {
padding-left: 0;
}
.cb-rank-hdr {
margin-top: 15px;
padding: 5px 0;
}
.cb-bg-grey {
background: #f5f5f5;
}
/*Players*/
.cb-player-name-wrap {
padding-top: 90px;
}
.cb-plyr-tbl {
margin-top: 30px
}
.cb-font-40 {
font-size: 40px;
}
/*Teams*/
.cb-cursor-pointer {
cursor: pointer;
}
.cb-team-stats-btn {
margin-top: 21px;
}
.cb-upper-text {
text-transform: capitalize;
}
Hope this helps..

The problem is that you have 2 closing div-tags which are outside your for-loop:
{% endfor %}
</div>
</div>
If you put those 2 inside the loop it should work and render the html correctly:
</div>
</div>
{% endfor %}

Related

How to resize these images in CSS?

My boss is having me update the company website since I know a little code, but I'm having trouble making the images bigger. This is the html code on the page:
<!----******* The Second Title Section -->
<!--<div style="width: 95%;overflow: hidden; margin:0 auto;" >
<div class="rightProduct">
<p class="partsTitle">Part Numbers and Manufacturers</p>
</div>
</div>-->
<!----******* The main product Section-->
<div class="apartmentInnerWrapper">
<div class="leftProduct">
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://efuses.com/wp-content/uploads/2018/11/copper-bus-bar-500x500.jpg" alt="H05" width="320" height="240"/>
</li>
</ul>
</div>
</div>
<div class="rightProduct">
<br></br> <p class="categoryTitle">Copper Busbar - In Stock and Ready for Immediate Shipment</p>
<p class="communityHeader">
</p>
<div class="fuseDescription">
<span class="fuseDescriptionP">
<br>Cut to Length</br>
<br>Bent and Drilled to Your Specs</br>
<br>Custom Fabrication</br>
</span>
<span><br>
<img src="https://efuses.com/wp-content/uploads/2018/11/H05WhiteBG.jpg" alt="H05" class="myimage" />
<img src="https://efuses.com/wp-content/uploads/2018/11/H02WhiteBG.jpg" alt="H02" class="myimage" /></br>
</span>
<p></p>
<img src="https://efuses.com/wp-content/uploads/2016/06/Express_Shipping-150.png"><span>In Stock Item & Ready to Ship</span>
<p class="chatLink">For Instant Quote - Open the Chat Below<br>
Or Email Us at
<a href="#contact_form_pop" class="fancybox talkPerson" >quote#powerfuse.com</a><br>
Or Call Us at
<span class="number talkPerson">918-665-6888</span>
And here is the CSS script:
/*************
community Page CSS
************/
/* Contact Form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
background-color: #fff;
border: 2px solid #2F3396;
color: #000;
width: 90%;
}
.site-header {
display: none;
}
.flexslider {
max-width: 600px;
margin: 0 auto 60px !important;
}
.site-inner {
padding: 0px !important;
max-width: 3000px !important;
}
a {
border-bottom: none !important;
text-decoration: none !important;
}
.communityMobileContainer {
display: none;
}
.communityContainer {
width: 100%;
margin: 0;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
.apartmentInnerWrapper {
width: 85%;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding: 10px 0px 20px 0px;
}
/*********************
Community Header
*********************/
.apartmentBanner {
width: 100%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
.topBanner {
background-color: #2F3396;
height: 100px;/*F8C800*/
}
.bottomBanner {
background-color: #C1D0D3;
width: 100%;
padding: 5px 0;
/*position: relative;
top: -40px;*/
}
.bottomBanner a {
color: #2F3396 !important;
}
.apartmentPets,
.apartmentBannerMap,
.apartmentBannerPrice {
float: left;
width: 33%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets1,
.apartmentBannerMap1 {
float: left;
width: 25%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentBannerPrice1 {
float: left;
width: 50%;
text-align: center;
font-weight: 600;
font-size: 16px;
color: #fff;
}
.apartmentPets a {
color: #fff;
}
.communityViewMap a {
color: #fff;
}
.talkSection > a{
padding-top: 10px !important;
color: #C1D0D3;
font-size: 30px;
}
.talkSection > a:hover {
color: #fff;
}
.talkSection .powerFuseBottom {
position: relative;
top: -29px;
}
.apartmentBannerMap {
padding-top: 4px;
}
.talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #c3251d;
text-decoration: underline !important;
}
.communityViewMap .talkPerson {
font-size: 18px !important;
font-weight: 600 !important;
padding: 5px 10px 5px 0px !important;
border: 0 !important;
top: 0px !important;
color: #2F3396;
text-decoration: none !important;
}
a:hover {
color: #000;
cursor: pointer;
}
.apartmentPets {
padding-top: 4px;
}
/* End Banner */
.rightProduct .partsTitle {
margin: 10px 0 0px;
font-size: 24px;
font-weight: 400;
}
.learnAboutFact {
margin: 10px 0 0px;
font-size: 32px;
font-weight: 400;
color: #2F3396;
text-align: center;
display: block;
}
/* Product Desciption */
.communityContainer .categoryTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
}
.communityContainer .categoryFuseTitle {
font-size: 26px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
margin: 0px;
padding: 35px 0 20px;
}
.communityContainer .leftProduct {
padding: 3px 12px;
width: 45%;
float: left;
overflow: hidden;
}
.communityContainer .leftProduct img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
.communityContainer .rightProduct {
padding: 3px 12px;
width: 53%;
float: right;
overflow: hidden;
}
.fuseDescriptionP {
font-size: 22px;
font-weight: 500;
color: #000;
margin-bottom: 0px;
}
.fuseDescriptionP p {
margin-bottom: 0px;
}
.contactUsBanner{
text-align: center;
font-size: 22px;
font-weight: 500;
color: #000;
}
.contactUsBanner a {
padding: 10px 15px;
color: #000;
}
.contactUsBanner a:hover {
color: #2F3396;
}
/* End Product Description */
.communityContainer .communityHeader {
padding: 2px 12px 0 0;
margin: 0 0 0 0;
width: 100%;
float: left;
text-align: left;
}
.communityContainer .communityHeader .communityTitle {
font-size: 30px;
font-weight: 600;
text-decoration: none;
color: #2F3396;
}
.communityContainer .fuseDescription p {
font-size: 16px;
}
/*********************
Community Description Section
*********************/
.communityContainer .fuseDescription{
width: 100%;
overflow: hidden;
padding: 0px 10px 5px 0px;
}
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
.communityContainer .fuseDescription span {
font-size: 20px;
font-weight: 400;
position: relative;
top: -15px;
padding: 0 0 0 15px;
}
.communityContainer .fuseDescription .chatLink {
font-size: 24px;
font-style: italic;
font-weight:600;
margin-bottom: 2px;
}
.communityContainer .fuseDescription p{
font-size: 16px;
}
.communityDescriptionHalf {
float: left;
width: 48%;
padding: 0px 4px;
}
.communityDescriptionThird {
float: left;
width: 32%;
padding: 0px 4px;
}
.communityDescription .communityPlansTitle {
padding: 3px 0 20px 0px;
width: 100%;
display: block;
clear: left;
}
.communityPlansDataLeft,
.communityPlansDataRight {
width: 48%;
float: left;
font-size: 16px;
font-weight: 400;
padding: 0 10px!important;
}
.communityPlansInfo h4{
font-size: 24px;
color: #004c71;
margin: 5px 0 2px 0 !important;
padding: 0 10px!important;
font-weight: 700;
text-align: center;
}
.communityPlansInfo p {
font-size: 18px;
margin: 0px 0 4px 0 !important;
padding: 0 10px!important;
font-weight: 600;
color: #000;
}
/* Footer */
.footer-widgets {
padding: 0px;
background-color: #C1D0D3;
}
.footer-widgets .wrap {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets .wrap a {
padding: 0px;
margin: 0px;
max-width: 3000px;
color: #fff;
}
.footer-widgets-1 {
width: 100%;
float: left;
padding: 20px 4%;
text-align: center;
margin: 0px;
font-size: 22px;
color: #2F3396;
}
.footer-widgets-1 p {
margin-top: 5px;
margin-bottom: 20px;
}
.footer-widgets-1 .widgettitle {
text-align: center;
color: #2F3396;
}
.footer-widgets-2 {
width: 50%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
color: #2F3396;
}
.footer-widgets-2 .widgettitle {
color: #2F3396;
}
.footer-widgets-1 a:hover,
.footer-widgets-2 a:hover {
color: #000;
}
.footer-widgets-3{
width: 20%;
float: left;
padding: 20px 4% 0px;
margin: 0px;
font-size: 18px;
}
.footer-widgets-3 .widgettitle {
color: #2F3396;
}
.footer-widgets .widget {
margin-bottom: 10px;
}
.widgettitle {
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
font-size: 32px;
}
.site-footer {
background-color: #23282D;
color: #fff;
}
.site-footer a {
color: #fff;
}
/*********************
Mobile CSS
*********************/
#media (max-width: 1000px) {
.communityContainer .communityPhone {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3{
width: 100%;
clear: left;
text-align: center;
}
.widgettitle {
text-align: center !important;
padding-top: 20px;
}
.communityContainer .communityUrl {
text-align: center;
width: 100%;
padding: 12px 0;
clear: both;
}
}
#media (max-width: 800px) {
.apartmentInnerWrapper {
width: 100%;
padding-top: 25px;
}
.topBanner {
height: 190px;
}
.apartmentPets,
.apartmentBannerPrice,
.apartmentBannerMap {
clear: left;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 18px;
}
.communityDescriptionHalf {
clear: left;
width: 100%;
}
.communityDescriptionThird {
clear: left;
width: 100%;
}
.communityContainer .leftProduct {
clear: both;
width: 100%;
}
.communityContainer .rightProduct {
clear: both;
width: 100%;
padding: 0 0 25px 0;
}
.communityContainer .communityHeader {
width: 100%;
}
.communityContainer .communityHeader .communityBuilder {
padding: 6px 3px;
}
}
#media (max-width: 700px) {
.communityMobileContainer {
display: inline-block!important;
}
.communityContainer {
display: important;
}
#communityPlansAll {
width: 100%;
max-width: 500px;
margin: 2px auto 2px auto;
}
/*********************
End Mobile CSS
*********************/
}
/*******************
*******************
Fuse Category Page
*******************
*******************/
.allAgentsWrapper {
width: 100%;
padding: 0 0 75px;
overflow: hidden;
}
.allAgentsWrapper .allAgents {
width: 100%;
margin: 0 auto;
max-width: 1000px;
overflow: hidden;
padding: 40px 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.singleAgent {
padding: 20px 10px;
width: 200px;
height: auto;
}
.singleAgent .bpTitle{
text-align: center;
font-size: 16px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 7px;
color: #606060;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpImg {
width: 100%;
height: auto;
border: 1px solid #f6f6f6;
}
.singleAgent .fuseImageWrapper {
overflow: hidden;
min-height: 144px;
}
.singleAgent .bpDesc p {
font-size: 12px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
line-height: 17px;
text-align: justify;
font-size: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
.singleAgent .AgentTop {
width: 100%;
padding: 5px 0;
}
.singleAgent .AgentTop .leftTop {
float: left;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .AgentTop .rightTop {
float: right;
width: 50%;
margin: 0;
padding: 5px 0;
}
.singleAgent .bpPrice {
font-size: 16px;
text-align: center;
padding: 5px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleAgent .bpLink {
padding: 7px 11px;
float: right;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleAgent .bpLink:hover {
background-color: #000;
}
.singleAgent .bpIcons {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
.singleAgent .bpIcon i {
font-size: 18px;
padding: 0 5px;
}
/* Single Agent Page */
.singleWrapper .topImage {
padding: 15px;
}
.singleWrapper .topSection {
padding: 5px 15px 15px;
}
.singleWrapper .topSection .bpTitle {
padding: 5px 0;
}
.singleWrapper .topSection .bpDesc {
padding: 5px 0 15px;
}
.singleWrapper .topSection .bpLink {
float: left;
padding: 7px 11px;
margin-top: 10px;
font-size: 16px;
font-weight: 600;
color: #fff;
font-weight: 400;
text-decoration: none;
background-color: #faab37;
border-radius: 0;
font-family: Oswald,Tahoma,Arial,sans-serif;
text-shadow: 1px 1px rgba(0,0,0,.25);
border: 0;
outline: 0;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.singleWrapper .topSection .bpPrice {
margin-left: 10px;
float: left ;
color: #606060;
font-size: 20px;
padding: 16px 0 0;
letter-spacing: 1px;
font-family: Oswald,Tahoma,Arial,sans-serif;
}
.singleWrapper .leftImage {
max-width: 300px;
}
.singleWrapper .rightSection {
max-width: 500px;
}
.singleWrapper .bpIcon i {
font-size: 22px;
padding: 0 5px 15px;
}
I tried adding this bit of code to the Community Description Section on the CSS file to see if it would work but it didn't.
.communityContainer .fuseDescription myimages {
width: 400px;
height: 300px;
}
Basically I'm flummoxed. Any help would be appreciated.
Here is a link to the page:
https://efuses.com/copperbusbar/
The two images in question are underneath the words Custom Fabrication.
Thanks!

I am inferring that since you have 2 images, you want to align them next to each other and have them occupy roughly half of the available space each. So a solution could be:
.communityContainer .fuseDescription img { display: inline-block; width: 49%; height: auto; }
First, you need a selector that correctly references and overwrites the current context, hence the 2 classes and an element. Then, displaying the images as inline-blocks allows them to respect the width and height specifications in all browsers. A width of 49% makes sure they both fit in a row snugly without pressing the outer margins. Height auto insures they keep their original proportion and don't get skewed.
Your error was the myimages selector which doesn't really exist in CSS, except if you wanted to specify the class name .myimages which would have also worked. The difference in approaches when using percentages vs pixels is the fact that the percentages adapt to the screen real estate available in varying contexts and browser sizes.
There are some other more advanced solutions based on the CSS grid specification that do the same trick for a variable amount of images on one "line" but I'm guessing you don't need that sort of complexity to solve this particular issue. :)

Change height of unordered list item in CSS

I have a unordered list in my HTML:
HTML:
<ul class="resp-tabs-list templatemo_testitab">
<li>Testimonials</li>
<li>Special Awards</li>
<li>Recognitions</li>
<li>New item</li>
</ul>
CSS:
html, body {
font-family: Tahoma, Arial;
padding: 0px;
margin: 0px;
color: #333333;
background: #333333;
font-size: 16px;
}
img { width: 100%; }
a {
color: #ffffff; outline: 0;
}
a:hover, a:focus {
text-decoration: none;
color: #cccccc;
}
a:active, a:focus {
color: #ffffff;
border: none;
}
p {
color: #333333;
}
h1, h2, h3, h4, h5, h6 {
font-family: Tahoma, Arial;
font-weight: 400;
}
h1 { font-size: 3em;
color: #cccccc;
background: #343537;
padding: 0px 0px;
float: left;
text-shadow: 4px 2px 2px rgba(33, 33, 33, 1);
margin: 5% 0% 0% 2%;;
}
h2 {
font-size: 24px;
color: #333333;
margin-top: 0px;
}
h3 {
text-align: center;
font-size: 2em;
}
.clear { clear: both; }
.content { display: none; height: auto; }
.homepage{ display: block; }
.portfolioshow { display: block; }
/* .container { position: absolute; } */
.templatemo_link ,.templatemo_linkservice,.templatemo_linkcontact {
font-size: 2em; color: #ffffff;
width: 95%;
}
.templatemo_link1 {
font-size: 2em; color: #ffffff;
padding-top:20%;
position: absolute;
width: 100%;
}
.templatemo_smalltitle {
float: left;
padding: 0px 0px 0px 0px;
font-size: 1em;
color: #b5b5b5;
margin: 10px 0px 30px 25px;
}
.templatemo_footer {
float: right;
padding: 0px 0px 0px 0px;
font-size: 14px;
color: #b5b5b5;
margin: 30px 40px 20px 0px;
}
.templatemo_mainservice {
background: #999933;
text-align: center;
width: 100%;
float: left;
}
.templatemo_mainportfolio {
background: #993333;
text-align: center;
width: 100%;
}
.templatemo_maintesti {
background: #339966;
text-align: center;
width: 100%;
}
.templatemo_mainabout {
background: #cc9933;
text-align: center;
width: 100%;
}
.templatemo_maincontact {
background: #006699;
text-align: center;
width: 100%;
}
.templatemo_insideportfolio h2 { color: #ffffff; }
.templatemo_insideportfolio {
background: #993333;
width: 100%;
padding: 0px;
color: #ffffff;
}
.templatemo_portfoliotext {
color: #ffffff;
/*position: absolute; */
width: 95%;
padding: 30px;
}
.templatemo_portfolioback {
background: #666666;
text-align: center;
width: 100%;
}
.templatemo_aboutback {
background: #666666;
text-align: center;
}
.templatemo_graybg {
float: left;
background: #cccccc;
overflow: hidden;
width: 100%;
}
.templatemo_paddinggap { padding: 30px; }
.templatemo_form { padding: 10px 0px; }
.templatemo_form input, .templatemo_form textarea {
border-radius: 0px;
border: 1px solid #999999;
}
.templatemo_form textarea {
height: 150px;
}
.templatemo_form button {
float: right;
background: #666666;
color: #ffffff;
border-radius: 0px;
border: none;
font-size: 16px;
}
#templatemo_map {
width: 100%;
height: 280px;
}
.templatemo_address { color: #757575; padding-top: 10px; }
/*------------------------------------------------------
Gallery Styles
--------------------------------------------------------*/
.gallery-item {
-webkit-box-shadow: inset 0 0 1px #666;
-moz-box-shadow: inset 0 0 1px #666;
box-shadow: inset 0 0 1px #666;
margin-bottom: 0px;
position: relative;
overflow: hidden;
}
.gallery-item .content-gallery {
text-align: center;
}
.gallery-item .content-gallery h3 {
color: #b10021;
font-size: 16px;
font-weight: 300;
margin-top: 5px;
padding-bottom: 5px;
display: inline-block;
}
.gallery-item img {
width: 100%;
}
.gallery-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-width: 100%;
min-height: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: block;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-ms-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
.gallery-item .overlay a {
color: #ffffff;
text-align: center;
line-height: 32px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
font-size: 24px;
}
.templatemo_frame {
float: left; overflow-x:hidden; margin-top: 30px;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #cccccc;
}
.templatemo_frame a {
color: #06C;
}
.templatemo_frame a:hover {
color: #C30;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #b1b1b1;
}
.resp-vtabs ul.templatemo_tab { float: left; width: 100%; }
.resp-vtabs ul.templatemo_tab li { padding: 0px; background: url(../images/templatemo_arrow_gap.png) no-repeat center right #cc9933; font-size: 24px; text-align: center; font-weight: normal; }
.resp-vtabs ul.templatemo_tab li.resp-tab-active{ background: url(../images/templatemo_arrow.png) no-repeat center right #cc9933; border: 0px; padding: 0px; color: #ffffff; }
.resp-vtabs ul.templatemo_testitab { float: left; width: 100%; }
.resp-vtabs ul.templatemo_testitab li { padding: 0px; background: url(../images/templatemo_arrow_gap.png) no-repeat center right #339966; font-size: 24px; text-align: center; font-weight: normal; }
.resp-vtabs ul.templatemo_testitab li.resp-tab-active { background: url(../images/templatemo_testi_arrow.png) no-repeat center right #339966; border: 0px; padding: 0px; color: #ffffff; }
.resp-vtabs .templatemo_aboutcontainer, .resp-vtabs .templatemo_testicontainer { background: none; border-radius: 0px; border: 0px; }
h2.resp-accordion { color: #ffffff; }
.resp-tabs-list li { color: #ffffff; }
.templatemo_testicontainer h2.resp-accordion {
background: #339966 !important; }
.templatemo_aboutcontainer h2.resp-accordion {
background: #cc9933 !important; }
/*----- Page Load ------*/
#media(min-width:320px) {
.templatemo_leftgap { padding: 0px 10px; }
.templatemo_rightgap_about { padding: 0px 10px; }
.templatemo_botgap { margin: 0px 0px 20px 0px; }
.templatemo_topgap, .templatemo_portfotopgap { margin-top: 20px; }
.templatemo_col37 { float: left; width: 100%; }
.resp-vtabs .templatemo_aboutcontainer, .resp-vtabs .templatemo_testicontainer { width: 100%; }
.templatemo_aboutlinkwrapper{ display: none; }
.templatemo_aboutlinkwrapper1{ display: block; }
.templatemo_frame { padding: 0px 30px 30px 30px; }
.templatemo_link { padding-top: 20%; }
.logocontainer { padding: 0px 15px; margin: 0 auto; }
.templatemo_insideportfolio { padding-bottom: 30px; }
.templatemo_link, .templatemo_linkservice, .templatemo_linkcontact { padding: 50px 0px; }
}
#media(min-width:320px) and (max-width: 767px) {
/*.container { left: 15px; right: 15px; padding: 0px; }*/
}
#media(min-width:768px) {
.templatemo_leftgap { padding: 0px 10px; }
.templatemo_botgap { margin: 0px 0px 20px 0px; }
.templatemo_topgap { margin-top: 20px; }
.templatemo_portfotopgap { margin-top: 0px; }
.templatemo_link { padding-top: 20%; }
/*.container { left: 50%; margin-left: -375px; right: 0px; }*/
.logocontainer { width: 750px; padding: 0px 15px; margin: 0 auto; }
.templatemo_insideportfolio { height: 398px; }
.templatemo_link, .templatemo_linkservice, .templatemo_linkcontact { height: 189px; line-height: 189px; padding: 0px; }
}
#media(min-width:992px) {
.templatemo_leftgap { padding: 0px 6px; }
.templatemo_rightgap_about { padding: 0px 6px 0px 2px; }
.templatemo_botgap { margin: 0px 0px 12px 0px; }
.templatemo_topgap { margin-top: 0px; }
.templatemo_portfotopgap { margin-top: 0px; }
.templatemo_bordergapborder { padding: 0px; margin: 0px; }
.templatemo_graybg {height: 397px; }
.templatemo_col37 { float: left; width: 37.5%; }
.templatemo_col50 { float: left; width: 50%; position: relative; }
.templatemo_form { padding: 5px 0px; }
.templatemo_form textarea { height: 120px; }
.templatemo_address { font-size: 12px; }
.templatemo_portfoliotext { width: 95%; padding: 15px ; font-size: 14px; }
.resp-vtabs .templatemo_aboutcontainer, .resp-vtabs .templatemo_testicontainer { width: 75%; }
.templatemo_leftgap_about { padding: 0px 0px 0px 6px; }
.templatemo_aboutlinkwrapper { width: 95.8%; float: left; background: #666666; text-align: center; display: block; }
.templatemo_aboutlinkwrapper1 { display: none; }
.resp-vtabs .templatemo_tab li,
.resp-vtabs .templatemo_testitab li{ padding: 0px; margin-bottom: 12px; }
.resp-vtabs ul.templatemo_tab li,
.resp-vtabs ul.templatemo_tab li.resp-tab-active,
.resp-vtabs ul.templatemo_testitab li,
.resp-vtabs ul.templatemo_testitab li.resp-tab-active { line-height: 79px; height: 79px; }
.templatemo_frame { height: 337px; margin-right: 1px; padding: 0px 30px; }
.templatemo_link { padding-top: 15%; }
/*.container { left: 50%; margin-left: -485px; }*/
.templatemo_link, .templatemo_linkservice, .templatemo_linkcontact { height: 124px; line-height: 124px; padding: 0px; }
.logocontainer { width: 970px; padding: 0px 15px; margin: 0 auto; }
.templatemo_insideportfolio { height: 260px; }
}
#media(min-width:1200px) {
.templatemo_leftgap { padding: 0px 8px; }
.templatemo_rightgap_about { padding: 0px 8px; }
.templatemo_botgap { margin: 0px 0px 16px 0px; }
.templatemo_topgap { margin-top: 0px; }
.templatemo_portfotopgap { margin-top: 0px; }
.templatemo_bordergapborder { padding: 0px 16px; }
.templatemo_graybg { height: 466px; }
.templatemo_col37 { float: left; width: 37.5%; position: relative; }
.templatemo_col50 { float: left; width: 50%; position: relative; }
.templatemo_form { padding: 10px 0px; }
.templatemo_form textarea { height: 150px; }
.templatemo_address { font-size: 14px; }
.templatemo_portfoliotext { width: 95%; padding: 30px; font-size: 16px; }
.resp-vtabs .templatemo_aboutcontainer, .resp-vtabs .templatemo_testicontainer { width: 75%; }
.templatemo_leftgap_about { padding: 0px 0px 0px 10px; }
.resp-vtabs ul.templatemo_tab li,
.resp-vtabs ul.templatemo_tab li.resp-tab-active,
.resp-vtabs ul.templatemo_testitab li,
.resp-vtabs ul.templatemo_testitab li.resp-tab-active { line-height: 93px; height: 93px; }
.resp-vtabs .templatemo_tab li,
.resp-vtabs .templatemo_testitab li { padding: 0px; margin-bottom: 15px; }
.templatemo_frame { height: 806px; padding: 0px 30px; }
.templatemo_link { height: 150px; line-height: 150px; padding: 0px; }
/*.container { left: 50%; margin-left: -585px; }*/
.logocontainer { width: 1140px; padding: 0px 30px; margin: 0 auto; }
.templatemo_insideportfolio { height: 316px; }
.templatemo_leftgap_about .templatemo_link { height: 142px; line-height: 142px; padding: 0px; }
.templatemo_linkservice, .templatemo_linkcontact { height: 145px; line-height: 145px; padding: 0px; }
}
These list items are shown in boxes in my file, and i want to change the height of these boxes, so where should i change my CSS code.
JSFiddle [here]

Change height in this class .resp-tabs-list li like this
.resp-tabs-list li {
color: #ffffff;
height: 40px;
}
This will change the height of list items.
Working JSFiddle http://jsfiddle.net/a843botj/1/

how to bring drop down menu infront of slider

hi i am having provlems with my drop down menu on my index page, the drop down items are hidden below my image slider which is directly below my nav bar, i would like to be able to see the drop down menu items, any help would be greatly appreciated
thank you very much;
here is my html for the nav bar:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="">sports news
<ul>
<li>headlines</li>
<li>when an where</li>
<li>rewind</li>
<li>manager of the week </li>
</ul>
</li>
<li class="about"><a class="active" href="#">music</a></li>
<li class="news">events
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">events</li>
<li class="contact">gallery</li>
<li class="contact">Contact</li>
</ul>
</div>
<div class="cleaner"></div>
and here is my css:
/*
jmc
*/
body {
margin: 0px;
padding: 0px;
color: #4d4638;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background: url(images/tooplate_body.jpg);
background-color: #c2b8a1;
background-repeat: repeat-x;
background-position: top
}
a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
.orange {
color: #FC0;
}
.green {
color: #CF6;
}
p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }
h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0; }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }
a.more {
clear: both;
display: block;
width: 87px;
height: 31px;
padding-right: 15px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: bold;
background: url(images/tooplate_btn.png);
}
a.more:hover {
text-decoration: none;
color: #960;
}
.float_l { float: left }
.float_r { float: right }
.tooplate_margin { margin: 10px; }
.image_wrapper {
display: inline-block;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 4px;
margin-bottom: 5px;
}
.image_fl {
float: left;
margin: 3px 15px 0 0;
}
.image_fr {
float: right;
margin: 3px 0 0 15px;
}
.tooplate_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tooplate_list li {
color:#000;
margin: 0 0 5px 0;
padding: 0 0 0 25px;
background: url(images/tooplate_list.png) no-repeat scroll 0 5px;
}
.tooplate_list li a {
color: #000;
font-weight: normal;
}
.tooplate_list li a:hover {
text-decoration: underline;
}
#tooplate_header {
width: 960px;
padding: 10px 0;
margin: 0 auto;
}
#site_title {
float: left;
}
#site_title h1 {
margin: 30px 0 0 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 278px;
height: 50px;
color: #fff;
text-indent: -10000px;
background: url(images/tooplate_logo.png) no-repeat;
}
/* menu */
#tooplate_menu {
float: right;
width: 632px;
height: 48px;
margin-top: 40px;
background: url(images/tooplate_menu.png)
}
#tooplate_menu ul {
width: 600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
#tooplate_menu ul li {
float: left;
display: block;
padding: 0;
margin: 0;
display: inline;
text-align: center;
}
#tooplate_menu ul li a {
display: block;
width: 116px;
padding: 9px 4px 9px 0;
margin: 0;
font-size: 14px;
text-align: center;
text-decoration: none;
color: #000000;
text-shadow: 1px 1px 1px #cec8ba;
font-weight: normal;
outline: none;
border: none;
background: url(images/tooplate_menu_divider.png) center right no-repeat
}
#tooplate_menu ul li a:hover, #tooplate_menu ul li .current {
color: #fff;
text-shadow: 1px 1px 1px #3d3728;
}
#tooplate_menu ul .last {
background: none;
}
#search_box {
float: right;
margin: 12px 0 0 0;
width: 170px;
height: 27px;
background: url(images/tooplate_search.png) no-repeat;
}
#search_box form {
clear: both;
width: 170px;
height: 26px;
padding: 0;
margin: 0;
}
#searchfield {
float: left;
display: block;
height: 16px;
width: 130px;
padding: 5px;
font-size: 12px;
color: #ccc;
line-height: 0;
background: none;
border: none;
}
#searchbutton {
float: right;
display: block;
height: 26px;
width: 30px;
padding: 0;
margin: 0;
cursor: pointer;
background: none;
border: none;
}
/* end of menu */
/* slider */
#tooplate_middle {
clear: both;
width: 940px;
height: 307px;
padding: 10px 40px;
margin: 0 auto;
background: url(images/tooplate_middle_home.png) no-repeat
}
#tooplate_middle_subpage {
clear: both;
width: 820px;
height: 207px;
padding: 60px 100px;
margin: 0 auto;
font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/tooplate_middle_subpage.png) no-repeat;
}
#tooplate_middle_subpage h2 {
font-size: 48px;
color: #000;
}
#tooplate_middle_subpage p {
font-size: 18px;
color: #000;
line-height: 30px;
}
#tooplate_middle_subpage a {
color: #507921;
font-weight: normal;
}
#slider {
float: right;
width: 940px;
height: 300px;
overflow: hidden;
}
/* end of slider */
#tooplate_main {
clear: both;
width: 960px;
padding: 30px 0;
margin: 0 auto;
}
.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }
.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }
.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }
#cp_contact_form {
margin: 10px;
padding: 0;
width: 412px;
}
#cp_contact_form form {
margin: 0px;
padding: 0px;
}
#cp_contact_form form .input_field {
width: 400px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#cp_contact_form form textarea {
width: 400px;
height: 160px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin-top: 5px;
}
#cp_contact_form form .submit_btn {
margin: 5px 0px;
padding: 5px 14px;
text-decoration: none;
border: 1px solid #ccc;
background: #fff;
font-size: 14px;
}
#map {
margin: 10px;
}
#map img {
width: 300px;
height: 200px;
border: 1px solid #d9d3c5;
background: #b5ac98;
padding: 7px;
margin-bottom: 10px;
}
.news_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px dashed #333;
}
.news_box h2 {
font-size: 20px;
margin-bottom: 0;
}
.news_box p.date {
color: #000;
}
.news_box img {
float: left;
padding: 4px;
border: 1px solid #000;
margin-right: 30px;
}
.news_box a.more {
clear:none;
float: right;
}
.sb_lp_box {
clear: both;
margin-bottom: 20px;
}
.sb_lp_box img {
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box {
clear: both;
margin-bottom: 30px;
}
.post_box h2 {
font-size: 20px;
margin-bottom: 10px;
}
.post_box p.post_meta {
margin-bottom: 0;
}
.post_box p span.cat a {
color: #507921;
font-weight: 400;
}
.post_box img {
width: 550px;
height: 160px;
border: 1px solid #cac2b1;
background: #b5ac98;
padding: 8px;
margin-bottom: 10px;
}
.post_box a.more {
float: left;
}
.lbe_box {
clear: both;
margin-bottom: 20px;
}
.lbe_box h3 {
font-size: 16px;
margin-bottom: 0;
}
.lbe_box h3 a {
color: #507921;
font-size: 16px;
font-weight: normal;
}
.lbe_box h3 a span {
font-size: 12px;
color: #507921;
}
.lbe_box p {
margin-bottom: 0;
}
.lbe_box p.date {
font-size: 10px;
font-weight: 700;
color: #507921;
}
#gallery {
margin: 0;
padding: 0;
}
#gallery ul {
margin: 0;
padding: 0;
}
#gallery ul li {
display: block;
float: left;
width: 281px;
margin: 0 30px 30px 0;
padding: 8px;
border: 1px solid #d0c9b8;
background: #b6ac97;
}
#gallery ul .third {
margin: 0 0 30px 0;
}
#gallery ul li a img {
border: 1px solid #ccc;
margin-bottom: 5px;
}
#tooplate_footer_wrapper {
clear: both;
width: 100%;
background: #a19882;
border-top: 10px solid #d0c8b4;
}
#tooplate_footer {
width: 960px;
margin: 0 auto;
padding: 15px 0;
text-align: center;
color: #000;
background: url(images/tooplate_footer.jpg) top center no-repeat
}
#tooplate_cr a {
color: #5fa008;
font-weight: normal;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#nav ul {
z-index: 9999;
}
thanks again;

From what I can see from the snippet provided, my best guess would be to add:
position:relative;
to your:
#nav ul{
z-index:9999;
}
HOWEVER I cannot see div id="nav" in your html! If you have just not included it in your snippet, that's fine, but if this is also an error and you mean to assign that css to div class="nav", then try changing that whole block to:
.nav ul{
position:relative;
z-index:9999;
}
One final note to remember, assign z-index to elements that ALSO have a position set (be it relative or absolute etc) - as far as i'm aware, z-index doesn't work unless the block has a position attribute set to it also.
Hope this works for you.

How to remove extraneous vertical space between html elements

I have a problem with spacing between form fields (and other HTML elements) as seen in the attached images. I've tried many things in the CSS but nothing has worked. I'm not sure if it's a paragraph marging-top setting.
thanks for the help.
.post-content is the class here and div.post-share for the facebook like buttons.
here's my style.css code:
body {
background: #f2f2f2;
padding-top: 58px;
padding-bottom: 15px;
}
.postid-1699 { padding-top: 338px; }
a {
color: #9f9f9f;
}
a:hover {
color: #3f3f3f;
}
a, p, h1, h2, h3, h4, h5, h6, div {
word-wrap: break-word;
}
h1, h2, h3 { letter-spacing: -1px;
}
/* Masonry */
#masonry {
margin: 0 auto;
visibility: hidden;
}
#masonry .thumb {
background: #fff;
border: 1px solid #e5e5e5;
font-size: 0.9em;
float: left;
margin: 0 8px 14px 8px;
position: relative;
width: 250px;
-webkit-box-shadow: 0 5px 10px #D6D6D6;
-moz-box-shadow: 0 5px 10px #D6D6D6;
box-shadow: 0 5px 10px #D6D6D6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#masonry .featured-thumb-link {
display: block;
min-height: 70px;
position: relative;
text-align: center;
width: 100%;
}
#masonry .featured-thumb-gif {
background: transparent url("img/gif_overlay.png") no-repeat;
height: 50px;
width: 50px;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
}
#masonry .sticky {
background: #ffd;
}
#masonry .masonry-actionbar {
display: none;
font-weight: normal;
height: 25px;
position: absolute;
text-align: center;
top: 5px;
width: 250px;
z-index: 999;
}
#masonry .masonry-actionbar button {
font-weight: normal;
}
#masonry .masonry-actionbar-mobile {
display: none;
}
#masonry .post-title {
line-height: 1.3em;
font-size: 1em;
margin: 3px 0 16px 0;
padding: 5px 10px 0 10px;
text-align: center;
}
#masonry .masonry-meta {
border-top: 1px solid #f5f5f5;
clear: both;
color: #888;
font-size: 0.9em;
line-height: 1.3em;
padding: 5px 10px 10px 10px;
}
#masonry .masonry-meta-author {
font-weight: bold;
}
#masonry .masonry-meta-comment-likes {
border-top: none;
padding-bottom: 5px;
padding-top: 0;
}
#masonry .masonry-meta-comment-likes span {
margin: 0 0.3em;
}
#masonry .masonry-meta-comment {
margin-left: 35px;
}
#masonry .masonry-meta-comment-content {
white-space: pre-wrap;
}
#masonry .masonry-meta-avatar {
float: left;
margin: 2px 0px 5px 0;
width: 26px;
}
#masonry .masonry-meta-avatar img {
height: 26px;
width: 26px;
}
#masonry #reply-title {
}
#masonry .masonry-meta textarea {
height: 27px;
margin-top: 2px;
padding-top: 2px;
resize: none;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#masonry .masonry-meta form {
margin: 0;
}
#ajax-loader-masonry {
left: 50%;
margin-left: -12px;
position: absolute;
top: 400px;
}
#infscr-loading {
background: #000;
bottom: 0;
color: #fff;
left: 50%;
margin-left: -60px;
opacity: 0.3;
padding: 5px;
position: fixed;
text-align: center;
width: 120px;
z-index: 100;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-text-shadow: none;
-moz-text-shadow: none;
text-shadow: none;
}
#infscr-loading img {
width: 43px;
}
#post-lightbox {
background: transparent;
bottom: 0;
left: 0;
margin: 0;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
#post-lightbox .post-wrapper {
position : static;
width: 570px;
margin: 25px auto;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Post */
#post-masonry {
position: relative
}
.post-wrapper {
background: transparent;
border: 0px solid #e5e5e5;
margin-bottom: 45px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.08);
-moz-box-shadow: 0 0px 0px rgba(0,0,0,0.08);
box-shadow: 0 0px 0px rgba(0,0,0,0.08);
z-index: 200;
}
.post-wrapper .h1-wrapper {
border-bottom: 1px solid #eee;
}
.post-wrapper .h1-wrapper h1 {
font-size: 1.5em;
line-height: 1.3em;
margin: 10px 25px;
text-align: center;
}
.post-wrapper .post-top-wrapper {
border-bottom: 1px solid #eee;
min-height: 48px;
padding: 20px 25px;
}
.post-wrapper .post-top-wrapper-header .follow {
font-weight: bold;
margin-top: 8px;
}
.post-wrapper .post-top-wrapper-header {
color: #999;
margin-left: 60px;
}
.post-wrapper .post-top-wrapper-author {
font-size: 1.5em;
font-weight: bold;
line-height: 1.2em;
}
.post-wrapper .post-top-wrapper-header a {
color: #000;
}
.post-wrapper .post-share {
position: absolute;
left: 50%;
margin-left: 320px;
}
.post-share-horizontal {
background: #fafafa;
display: block;
padding: 8px 8px 0 8px;
}
.post-share-horizontal #___plusone_0, .post-share-horizontal #___plusone_1 {
margin-left: -25px !important;
margin-right: -15px !important;
padding-bottom: 13px !important;
}
.post-share .fb_iframe_widget {
display: block;
height: 20px;
overflow: hidden;
width: 90px;
}
.post-share .fb_iframe_widget span {
width: 450px !important;
}
.post-comments-wrapper .fb_iframe_widget span, .post-comments-wrapper .fb_iframe_widget {
width: 100% !important;
}
.post-share-horizontal .pinterest img, .post-share-horizontal .post-embed, .post-share-horizontal .post-email, .post-share-horizontal #post-email-board, .post-share-horizontal .post-report {
margin-top: -14px;
}
.post-wrapper .post-top-meta {
margin: 0 25px;
padding: 20px 0 0 0;
}
.post-wrapper .post-top-meta .pull-right {
color: #a1a1a1;
font-size: 0.9em;
}
.post-wrapper .post-top-meta .pull-right a {
font-weight: bold;
}
.post-wrapper .post-actionbar {
font-weight: normal;
}
.post-wrapper .post-actionbar button {
font-weight: normal;
}
.post-wrapper .post-actionbar .btn {
margin-bottom: 4px;
}
.post-wrapper .featured-thumb {
position: relative;
}
.post-wrapper .post-featured-photo {
background: #f2f2f2;
margin: 24px;
position: relative;
text-align: center;
}
.post-wrapper .post-nav-next {
position: absolute;
margin-top: -10px;
top: 50%;
right: -18px;
}
.post-wrapper .post-nav-prev {
position: absolute;
margin-top: -10px;
top: 50%;
left: -18px;
}
.post-wrapper .post-nav-next a, .post-wrapper .post-nav-prev a {
display: block;
font-size: 15px;
}
.post-wrapper .post-nav-next a:hover, .post-wrapper .post-nav-prev a:hover {
color: #555;
text-decoration: none;
}
.post-wrapper .post-nav-link-lightbox {
border: 1px solid #ccc;
height: 32px;
line-height: 32px;
width: 32px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-text-shadow: 1px 1px #fff;
-moz-text-shadow: 1px 1px #fff;
text-shadow: 1px 1px #fff;
}
.post-wrapper .post-nav-link-lightbox i {
display: block;
line-height: 32px;
}
.post-wrapper .post-nav-next-lightbox, .post-wrapper .post-nav-prev-lightbox {
position: fixed;
}
.post-wrapper .post-nav-link-lightbox:hover {
border: 1px solid #aaa;
}
.post-wrapper .post-content {
margin: 25px;
}
.post-wrapper .post-content h1 {
font-size: 1em;
font-weight: normal;
line-height: 1.4em;
}
.post-wrapper .post-content .post-title-large {
font-size: 1.5em;
font-weight: bold;
line-height: 1em;
}
.post-wrapper .post-original-author {
color: #999;
font-size: 0.9em;
}
.post-wrapper .post-original-author a {
font-weight: bold;
}
.post-wrapper .post-content .thecontent img {
height: auto;
}
.post-wrapper .post-comments {
border-top: 1px solid #eee;
padding-top: 20px;
}
.post-wrapper .post-comments-wrapper {
margin: 0 25px;
}
.post-wrapper .post-board {
border-top: 1px solid #eee;
margin-bottom: 16px;
}
.post-wrapper .post-board-wrapper {
margin: 0 25px;
}
.post-wrapper .post-board-wrapper h4 {
font-size: 1.1em;
margin-top: 12px;
}
.post-wrapper .post-board-wrapper .follow {
font-weight: bold;
margin-top: -2px;
}
.post-wrapper .post-board-wrapper a {
font-weight: bold;
}
.post-wrapper .post-board-photo {
background: #fcfcfc;
border-right: 4px solid #fff;
border-bottom: 4px solid #fff;
float: left;
height: 48px;
overflow: hidden;
width: 48px;
}
.post-wrapper .post-board-photo:nth-child(n+8) {
border-left: 2px solid #fff;
border-right: 3px solid #fff;
}
.post-wrapper .post-board-photo:nth-child(10) {
border-right: none;
}
.post-wrapper .post-likes {
border-top: 1px solid #eee;
padding-top: 10px;
}
.post-wrapper .post-likes-wrapper {
margin: 0 25px 5px 25px;
}
.post-wrapper .post-likes-wrapper h4 {
float: left;
font-size: 1.1em;
margin-top: 12px;
}
.post-wrapper .post-likes-wrapper a {
display: inline-block;
margin: 0 0 6px 6px;
}
.post-wrapper .post-likes-wrapper .more-likes {
margin-left: 7px;
}
.post-wrapper .post-meta-top {
margin: 0 25px;
padding: 5px 0 15px 0;
}
.post-wrapper .post-likes-avatar {
margin-left: 55px;
}
.post-wrapper #post-repins {
border-top: 1px solid #eee;
padding: 10px 0;
}
.post-wrapper .post-repins-wrapper {
margin: 0 25px 5px 25px;
}
.post-wrapper .post-repins-wrapper h4 {
float: left;
font-size: 1.1em;
margin-top: 12px;
}
.post-wrapper .post-repins-wrapper ul {
list-style-type: none;
margin-left: 62px;
}
.post-wrapper .post-repins-wrapper li {
margin-bottom: 6px;
min-height: 50px;
}
.post-wrapper .post-repins-wrapper li.more-repins {
min-height: 1em;
}
.post-wrapper .post-repins-wrapper .post-repins-content {
line-height: 1.1em;
margin-left: 55px;
padding-top: 15px;
}
.post-wrapper .post-repins-wrapper a {
font-weight: bold;
}
.post-wrapper .post-repins-avatar {
margin-right: 4px;
}
.thetags {
margin-top: 6px;
padding: 0;
}
.thetags a {
border: 1px solid #e1e1e8;
display: inline-block;
margin-bottom: 5px;
max-width: 90%;
padding: 2px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.thetags a:hover {
background: #fcfcfc;
text-decoration: none;
}
#post-repin-box {
background: #f2f2f2;
left: 50%;
margin-left: -210px;
max-width: 420px;
position: absolute;
}
#post-repin-box .close {
margin: 3px 8px 0 0;
}
#post-repin-box .post-repin-box-photo {
background: #e1e1e1;
border: 1px solid #aaa;
margin: 5px 25px;
overflow: hidden;
text-align: center;
}
#post-repin-box .post-repin-box-photo img {
max-height: 300px;
}
#post-repin-box #repinform {
margin: 10px 25px 10px 25px;
}
#post-repin-box .input-prepend, #post-repin-box .input-append {
margin: 0 0 3px 0;
width: 100%;
}
#post-repin-box .add-on {
background-color: #fcfcfc;
color: #999;
font-size: 18px;
font-weight: bold;
height: 22px;
line-height: 22px;
margin: 3px -1px 0 -1px;
width: 13%;
}
#post-repin-box .input-prepend input, #post-repin-box .input-append input {
font-size: 18px;
height: 32px;
margin: 3px 0;
text-align: left;
width: 84%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#post-repin-box .input-append input {
text-align: right;
}
#post-repin-box #repinform select {
font-size: 18px;
height: 32px;
margin: 3px 0 6px 0;
width: 65%;
background: rgb(252,252,252);
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(241,241,241,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(241,241,241,1)));
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(241,241,241,1) 100%);
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(241,241,241,1) 100%);
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(241,241,241,1) 100%);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(241,241,241,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f1f1f1',GradientType=0 );
}
#post-repin-box #repinform #noboard select {
color: #999;
}
#post-repin-box #repinform #repinform-add-new-board {
margin-top: 3px;
padding: 6px 10px;
}
#post-repin-box #repinform #board-add-new {
display: none;
font-size: 18px;
font-weight: bold;
height: 21px;
margin: 5px 0 5px 0;
width: 61%;
}
#post-repin-box #repinform textarea {
font-size: 18px;
height: 4em;
resize: vertical;
text-align: center;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#post-repin-box #repinform #pinit {
font-size: 1.2em;
font-weight: bold;
margin: 5px 0;
}
#post-repin-box #repinform .alert {
height: 18px;
}
#post-repin-box #repinnedmsg {
margin: 0 25px 15px 25px;
}
#post-zoom-overlay {
background: #000;
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1055;
opacity: 0.85;
filter: alpha(opacity=85);
}
#post-embed-overlay {
background: #fff;
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1055;
opacity: 0.92;
filter: alpha(opacity=92);
}
#post-embed-box {
z-index: 1060;
}
#post-embed-box .modal-footer {
text-align: left;
}
#post-embed-box .modal-footer .help-inline {
color: #aaa;
font-size: 1.3em;
margin-top: -10px;
}
#post-embed-box input {
font-size: 1.3em;
padding: 10px;
}
#post-embed-box .modal-footer textarea {
background-color: #f5f5f5;
font-size: 1.3em;
line-height: 1.2em;
height: 6em;
padding: 10px;
resize: none;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#post-email-overlay, #post-email-board-overlay {
background: #fff;
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1055;
opacity: 0.92;
filter: alpha(opacity=92);
}
#post-email-box, #post-email-board-box {
z-index: 1060;
}
#post-email-box .modal-footer, #post-email-board-box .modal-footer {
text-align: left;
}
#post-email-box .modal-footer .help-inline, #post-email-board-box .modal-footer .help-inline {
color: #aaa;
font-size: 1.3em;
margin-top: -10px;
}
#post-email-box input, #post-email-board-box input {
font-size: 1.3em;
padding: 10px;
}
#post-email-box .modal-footer textarea, #post-email-board-box .modal-footer textarea {
font-size: 1.3em;
line-height: 1.2em;
height: 6em;
padding: 10px;
resize: none;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#post-report-overlay {
background: #fff;
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1055;
opacity: 0.92;
filter: alpha(opacity=92);
}
#post-report-box {
z-index: 1060;
}
#post-report-box .modal-footer {
text-align: left;
}
#post-report-box .modal-footer .help-inline {
color: #aaa;
font-size: 1.3em;
margin-top: -10px;
}
#post-report-box input {
font-size: 1.3em;
padding: 10px;
}
#post-report-box .modal-footer textarea {
font-size: 1.3em;
line-height: 1.2em;
height: 6em;
padding: 10px;
resize: none;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.subpage-title h1 {
font-size: 1.8em;
line-height: 1.2em;
padding-bottom: 0.6em;
margin-bottom: 5px;
text-align: center;
-webkit-text-shadow: 1px 1px #fff;
-moz-text-shadow: 1px 1px #fff;
text-shadow: 1px 1px #fff;
}
.subpage-title p {
border-top: 3px double #ccc;
padding: 8px 0;
text-align: center;
}
.grand-title-wrapper {
margin: 30px 0 60px 0;
text-align: center;
}
.grand-title-wrapper h1 {
border-bottom: 3px double #ccc;
font-size: 1.8em;
line-height: 1.2em;
padding-bottom: 0.6em;
margin-bottom: 5px;
-webkit-text-shadow: 1px 1px #fff;
-moz-text-shadow: 1px 1px #fff;
text-shadow: 1px 1px #fff;
}
.grand-title-wrapper h1 a {
font-weight: bold;
}
.grand-title-wrapper .grand-title-subheader {
border-bottom: 3px double #ccc;
padding: 4px 0 8px 0;
}
.grand-title-wrapper .grand-title-subheader .avatar {
height: 32px;
width: 32px;
}
.grand-title-wrapper .grand-title-subheader a {
color: #000;
font-weight: bold;
}
.grand-title-wrapper .grand-title-subheader .pull-left a {
margin-right: 5px;
}
.grand-title-wrapper .follow {
color: #000;
font-weight: bold;
}
/* Comments */
.post-comments .commentlist {
list-style-type: none;
margin: 0;
padding: 0;
}
.post-comments .commentlist li {
list-style: none;
padding-bottom: 1em;
}
.post-comments .commentlist ul.children li {
margin: 1em 0 0 0;
padding: 0;
}
.post-comments .comment-avatar {
float: left;
padding: 3px 10px 0 0;
}
.post-comments .comment .pull-right a {
padding: 2px 6px;
font-size: 0.8em;
line-height: 15px;
color: #888;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ddd;
*border: 0;
border-bottom-color: #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.post-comments .comment .pull-right a:hover {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
text-decoration: none;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.post-comments .comment-content {
color: #333;
line-height: 1.3em;
margin-left: 60px;
padding-bottom: 5px;
width: 80%;
}
.post-comments span.bypostauthor a.url {
background-color: #aaa;
color: #fff;
margin-right: 5px;
padding: 0 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.post-comments span.bypostauthor a.url:hover {
background-color: #990000;
text-decoration: none;
}
.post-comments #reply-title {
color: #666;
font-size: 18px;
margin: 0;
padding: 0;
}
.post-comments #cancel-comment-reply-link {
margin-left: 60px;
}
.post-comments blockquote p {
font-size: 1em;
}
#commentform .commentform-input {
color: #666;
margin-right: 14px;
width: 31%;
}
#commentform .commentform-input:nth-child(3) {
margin-right: 0;
}
#commentform .commentform-field {
width: 94%;
}
#commentform .textarea-wrapper {
margin-left: 60px;
}
#commentform textarea {
background: #fafafa;
height: 48px;
resize: vertical;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Media Queries */
#media (min-width: 1200px) {
#post-lightbox .post-wrapper {
width: 570px;
}
#commentform .commentform-input {
margin-right: 10px;
width: 32%;
}
.sidebar .sidebar-left-single {
width: 270px;
}
.sidebar-right-single {
margin-left: 5px;
}
.board-mini {
width: 270px;
}
.board-mini .board-photo-wrapper {
height: 65.5px;
width: 65.5px;
}
.board-domain .board-domain-wrapper {
height: 55px;
width: 55px;
}
.post-wrapper .post-share {
margin-left: 320px;
}
.usercp-pins #pin-upload-postdata-wrapper form .input-prepend input, .usercp-pins #pin-upload-postdata-wrapper form .input-append input {
width: 85%;
}
}
#media (max-width: 979px) {
body {
padding-top: 0;
}
#post-lightbox .post-wrapper {
width: 460px;
}
.sidebar {
padding-top:0;
}
.sidebar .sidebar-left-single {
width: 166px;
}
.board-mini {
width: 166px;
}
.board-mini .board-photo-wrapper {
height: 39.5px;
width: 39.5px;
}
.board-domain .board-domain-wrapper {
height: 29px;
width: 29px;
}
.post-wrapper .post-share {
margin-left: 260px;
}
.post-top-meta .pull-right {
clear:both;
float: none;
padding-top: 10px;
}
#double-left-column {
padding-bottom: 20px;
}
#scrolltotop {
right: 5px
}
#scrolltotop a {
padding: 5px 10px;
}
#commentform .commentform-input {
margin-right: 14px;
width: 100%;
}
#commentform .commentform-field {
width: 98%;
}
}
#media (min-width: 768px) and (max-width: 979px) {
#pin-postdata-add-new-board {
float: left;
}
}
#media (max-width: 767px) {
.sidebar .sidebar-left-single, .post-share {
display: none;
}
.sidebar-right-single {
margin-top: 0;
margin-left: 0;
}
.post-wrapper .post-board {
display: block;
}
.post-wrapper {
margin-bottom: 5px;
}
.board-mini {
width: 166px;
}
#userbar .nav {
display: block;
}
.usercp-pins #pin-upload-postdata-wrapper form .input-prepend input, .usercp-pins #pin-upload-postdata-wrapper form .input-append input {
width: 85%;
}
}
#media (max-width: 480px) {
#shadowtop { margin-top: -5px;
}
#masonry .thumb {
width: 93%;
}
#masonry .featured-thumb {
height: auto !important;
width: 100% !important;
}
#masonry .masonry-actionbar-mobile {
display: block;
margin-bottom: 5px;
text-align: center;
}
#post-repin-box {
margin-left: 0;
max-width: 100%;
top: 10px;
left: 10px;
right: 10px;
}
#post-repin-box select {
max-width: 50%;
}
#post-repin-box .post-repin-box-photo img {
max-height: 150px;
}
.post-wrapper .post-board-photo:nth-child(n+8) {
border-left: none;
border-right: 4px solid #fff;
}
.post-wrapper .post-board-photo:nth-child(10) {
border-right: none;
}
.post-wrapper .post-top-wrapper-header .follow {
margin-top: -40px;
}
.post-wrapper .post-top-wrapper-header {
clear: both;
margin: 50px 0 0 0;
}
.board-mini {
width: 88%;
}
.board-mini .board-photo-wrapper {
height: auto;
min-height: 35px;
width: 24.5%;
}
#user-profile-follow .follow-wrapper {
margin: 10px 0;
width: 90%;
}
}
#media (max-width: 480px) and (orientation:landscape) {
#masonry .thumb {
margin-left: 13px;
margin-right: 13px;
}
#shadowtop { margin-top: -2px;
}

it was a Google Web fonts plugin that caused it. I disabled the plugin and the problem went away.
this is from the HTML source code:
p {
margin-top: 269px; margin-bottom: 188px;
}

Having trouble with bottom aligning

I'm trying to get the items on one of my pages to line up at the bottom. The realworld example is http://www.silverartcollector.com. You can see on the main page the content area, there are 2 product boxes that have different size images which will be common. I want the bottoms to align so it will look neater. I've tried doing vertical-align:bottom on my main class but it doesn't work, I'm presuming because of the float:left. However, after hours of testing, I can't figure it out. I appreciate any input/help.
Here is the page code:
<div class="float_r" id="content">
<h3>Recent Additions</h3><br>
<div class="product_box">
<img width="150" src="admin/uploads/ONE-7 O.JPG">
<h3>Huck Finn</h3>
<p class="product_price">One Mint</p>
<!--ONE-7<br/>-->
<a class="detail" href="productdetail.php?id=1">Details</a>
</div>
<div class="product_box">
<img width="150" src="admin/uploads/MLM-11 O.jpg">
<h3>Keep Me & Never Go Broke</h3>
<p class="product_price">Mother Lode Mint</p>
<!--MLM-11<br/>-->
<a class="detail" href="productdetail.php?id=20">Details</a>
</div>
</div>
And here is the stylesheet:
/*
Credit: http://www.templatemo.com
*/
body {
margin: 0;
padding: 0;
color: #999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.4em;
background-color: #2e2e2e;
background-repeat: repeat;
background-image: url(../images/templatemo_body.jpg)
}
a, a:link, a:visited {
color: #08aee3;
font-weight: normal;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.more {
display: inline-block;
width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 10px;
font-weight: bold;
color: #21bdd0;
background: url(../images/more_but.jpg);
}
a.more:hover {
background: #333;
text-decoration: none;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
img {
border: none;
}
blockquote {
border: 1px solid #ccc;
border-left: 5px solid #000;
padding: 19px;
margin: 20px 0 0 0;
}
cite a, cite a:link, cite a:visited {
font-size: 12px;
text-decoration: none;
font-style: normal;
}
cite span {
font-weight: 400;
color: #333;
}
.templatemo_list {
margin: 10px 0 10px 15px;
padding: 0;
list-style: none;
}
.templatemo_list li {
color:#636363;
margin: 0 0 5px 0;
padding: 0 0 0 15px;
background: url(../images/templatemo_list.png) no-repeat scroll 0 7px;
}
.templatemo_list li a {
color: #636363; font-weight: normal;
}
.templatemo_list li a:hover {
color: #000;
}
h1, h2, h3, h4, h5, h6, h7, h8{
color: #333;
font-weight: normal;
}
h1 {
font-size: 30px;
margin: 0 0 30px;
padding: 5px 0;
}
h2 {
font-size: 26px;
margin: 0 0 25px;
padding: 5px 0;
}
h3 {
font-size: 20px;
margin: 0 0 20px;
padding: 0;
}
h4 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
}
h5 {
font-size: 14px;
margin: 0 0 10px;
padding: 0;
}
h6 {
font-size: 12px;
margin: 0 0 5px;
padding: 0;
}
h7 {
font-size: 16px;
margin: 0 0 15px;
padding: 0;
line-height:150%
}
h8 {
line-height:150%;
font-size: 14px;
margin: 0 0 15px;
padding: 0;
color: white;
}
.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.float_l { float: left }
.float_r { float: right }
#templatemo_wrapper {
width: 960px;
margin: 0 auto;
padding: 0 10px 10px;
}
#templatemo_header {
width: 100%;
padding: 50px 0 10px;
}
#templatemo_menu {
width: 100%;
height: 77px;
margin-bottom: 3px;
background: url(../images/templatemo_menu.jpg) repeat-x
}
#templatemo_middle {
width: 100%;
height: 200px;
margin-bottom: 3px;
padding-bottom: 2px;
background: #fff url(../images/templatemo_middle.jpg) repeat-x bottom
}
#templatemo_main {
width: 100%;
margin-bottom: 10px;
}
#content {
width: 680px;
background: #ffffff;
border: 1px solid #fff;
padding: 15px;
}
#sidebar { width: 240px }
#templatemo_footer {
width: 960px;
text-align: center;
padding: 9px 0px;
background: #121212;
border: 1px solid #3a3a3a
}
#site_title {
float: left;
}
#site_title h1 {
margin: 0;
padding: 0;
}
#site_title h1 a {
display: block;
width: 300px;
height: 20px;
font-size: 12px;
text-indent: -10000px;
color: #999;
text-align: left;
background: url(../images/logo.gif) no-repeat top left;
}
#header_right {
float: right;
margin-top: 5px;
}
#header_right a {
color: #ccc;
}
#menu_second_bar {
padding: 5px 10px;
}
#top_shopping_cart {
float: left;
padding: 5px 0;
font-size: 11px;
}
#templatemo_search {
float: right;
}
#templatemo_search form {
margin: 0;
padding: 0;
}
#templatemo_search .txt_field {
float: left;
display: block;
margin-right: 5px;
height: 24px;
line-height: 24px;
width: 300px;
color: #999;
font-size: 12px;
padding: 0 5px;
font-variant: normal;
border: 1px solid #666;
background: #333;
}
#templatemo_search .sub_btn {
float: right;
display: block;
color: #fff;
height: 26px;
font-size: 11px;
font-weight: 700;
line-height: 26px;
cursor: pointer;
border: 1px solid #333;
background: #0ec4f7;
}
.sidebar_box {
position: relative;
background: #4c4a4a;
margin-bottom: 20px;
}
.sidebar_box h3 {
font-size: 14px;
font-weight: 700;
padding: 10px;
width: 220px;
height: 20px;
margin-bottom: 0;
background: url(../images/templatemo_sidebar_header.jpg) no-repeat; color: #999
}
.sidebar_box span.bottom {
position: absolute;
bottom: -26px;
left: 0;
width: 240px;
height: 26px;
background: url(../images/templatemo_sidebar_bottom.jpg)
}
#sidebar .sidebar_box .content {
padding: 10px 10px 0;
}
#sidebar .sidebar_list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .sidebar_list li {
display: block;
margin: 0;
padding: 3px 0;
border-top: 1px solid #595858;
border-bottom: 1px solid #343434;
}
#sidebar .sidebar_list li.first {
border-top: none;
}
#sidebar .sidebar_list li.last {
border-bottom: none;
}
#sidebar .sidebar_list li a {
color: #d6d3d3;
}
#sidebar .sidebar_list li a:hover {
color: #fff;
text-decoration: none;
}
.bs_box { clear: both; margin-bottom: 20px }
.bs_box img { float: left; margin-right: 10px; border: 4px solid #3d3d3d }
.bs_box h4 { margin-bottom: 0 }
.bs_box h4 a { font-size: 12px; color: #08aee3; font-weight: 700}
.bs_box .price { font-size: 12px; font-weight: 700; color: #fff }
.product_box {
float: left;
width: 225px;
text-align: center;
margin: 0 0px 0px 0;
}
.product_box img {
margin-bottom: 5px;
}
.product_box h3 {
font-size: 11px;
color: #000;
font-weight: 700;
margin-bottom: 10px;
}
.product_box .product_price {
color: #8fb410;
font-size: 14px;
font-weight: 700;
}
.product_box .add_to_card {
float:left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: url(../images/add_to_cart.jpg);
margin-left: 42.5px;
}
.product_box .detail {
float: left;
display: block;
width: 140px;
height: 28px;
line-height: 28px;
text-align: center;
background: url(../images/detail.jpg);
margin-left: 42.5px;
}
.checkout input {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 5px;
}
#contact_form {
padding: 0;
width: 312px;
margin-bottom: 40px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 300px;
padding: 5px;
color: #222;
background: #fff;
border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 12px;
font-size: 13px;
}
#contact_form form textarea {
width: 300px;
height: 200px;
padding: 5px;
color: #222;
background: #fff; border: 1px solid #dedede;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
margin-top: 5px;
}
#contact_form form .submit_btn {
padding: 5px 12px;
background-color: #000;
border: 1px solid #fff;
color: #fff;
font-size:14px;
margin: 10px 0px;
}
.faq h3 { font-size: 14px; margin: 30px 0 5px }
.content_half {
width: 320px;
}
.content_13 {
width: 220px;
margin-right: 10px;
}
.no_margin_right {
margin-right: 0;
}
#templatemo_footer {
color: #707070;
}
#templatemo_footer a {
color: #999;
}
.question {
position:relative;
display: inline-block;
text-align:center;
left:-1em;
top:-5em;
padding: 10px 0px 0px 0px;
width: 174px;
height: 58px;
color:black;
font-weight:bold;
font-size: 13px;
line-height: 1.3em;
background: url('../admin/images/bubble.png') left top no-repeat;
opacity:0;
z-index:1;
}
.yes{
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #434d17;
text-shadow: 0px 1px 0px #fff;
background: url('../admin/images/buttony.png') left top no-repeat;
}
.cancel {
margin-top: .5em;
margin-right: .5em;
cursor: pointer;
display: inline-block;
width: 63px;
height: 21px;
color: #fff;
text-shadow: 0px 1px 0px #000;
background: url('../admin/images/buttonn.png') left top no-repeat;
}
.mint_box {
float: left;
width: 300px;
text-align: left;
margin: 0 10px 10px 0;
}
}

I think an inline-block approach would do what you want:
.product_box {
display: inline-block;
margin: 0;
text-align: center;
vertical-align: bottom;
width: 225px;
}

You could use relative positioning to move the div down, however, you would need to give the Keep Me & Never Go Broke div a unique id
add to div
id="whatever_u_want_to_call_it"
then style the id to have a relative position
#whatever_u_want_to_call_it{
position: relative;
bottom: -215px;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

html page missing the alignment in every iteration in Django Template - html

The problem is that you have 2 closing div-tags which are outside your for-loop: {% endfor %} </div> </div> If you put those 2 inside the loop it should work and render the html correctly: </div> </div> {% endfor %}

Related

How to resize these images in CSS?

Change height of unordered list item in CSS

how to bring drop down menu infront of slider

How to remove extraneous vertical space between html elements

Having trouble with bottom aligning

Categories

Resources