Jump to content
Sign in to follow this  
ike

CSS Padding Not Equally Applied

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>

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...