Jump to content

CSS Padding Not Equally Applied


ike
 Share

Recommended Posts

Can someone help me understand why the padding isn't applied equally to the top and bottom of my banners div?  The top has the 50px padding but the bottom does not.  However, when you resize the browser window then the padding seems to be applied equally.

 

<style>

/* -------------------- START BANNERS CSS STYLE-------------------- */
div.banners {
 padding: 50px 0px;
 margin: 0px 0px;
 background-color: #f60;
}
div.banners-third {
 width: 30%;
 margin-right: 5%;
 float: left;
 text-align: center;
}
div.banners-third-last {
 margin: 0px;
}
/* -------------------- END BANNERS CSS STYLE-------------------- */


/* -------------------- MEDIA QUERIES ---------------------- */

@media screen and (max-width: 820px)
{
div.banners-third {
 width: 47.5%;
}
div.banners-third-second {
 margin: 0px;
}
div.banners-third-last {
 padding: 20px 0px 0px;
 width: auto;
 clear: both;
 float: none;
}
}

 

@media screen and (max-width:720px)
{
div.banners-third {
 width: 33%;
 margin-top: 25px;
}
div.banners-third-last {
 padding: 0px 0px 0px;
 width: auto;
 clear: both;
 float: none;
}
div.banners-mobile-collapse {
 width: auto;
 margin-right: 0px;
 float: none;
}
}


</style>
</HEAD>

<body>


<!-------------------- START BANNERS HTML -------------------->    
<!-- banners- -->  
<DIV class="banners">

<!-- one-third -->   
<DIV class="banners-third banners-mobile-collapse">
  <h2>Banner 1</h2>
</DIV><!--/banners-third-->

      
<!-- banners-one-third -->   
<DIV class="banners-third banners-third-second banners-mobile-collapse">   
     <h2>Banner 2</h2>
</DIV><!--/banners-third-->
      

<!-- banners-one-third -->   
<DIV class="banners-third banners-third-last">
<h2>Banner 3</h2>
</DIV><!--/banners-third-->
 
</DIV><!--/banners-->    
<!-------------------- END BANNERS HTML --------------------> 

</BODY>
</HTML>

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...