title: Positioning issues with CSS when pages have elements missing
body: <p>There is a specific section of my website which had broken look due to bad CSS &amp; PHP code, which I decided to fix today. With good luck fixed a lot of it(and learned CSS along the way).</p>
  
  <p>The pages I fixed have dynamic content on them - Badges like we have here on stackoverflow. Depending on user level, some people may not have any badges. </p>
  
  <p>The problem is, while pages that have badges look alright, the ones which don't look entirely broken, and the rest of the content on pages shifts when there are no badges.</p>
  
  <p>Any thoughts on how should I go  about fixing it?</p>
  
  <p>CSS:</p>
  
  <pre><code>.ms-sellerprofile {
      width: 100%;
      align:center;
  }
  
  .ms-sellerprofile .seller-data {
      width: 100%;
      display: inline-block;
      align:center;
  }
  
  .ms-sellerprofile .seller-data &gt; div {
      display: inline;
      float: left;
  }
  
  
  .ms-sellerprofile .seller-data .avatar-box-img {
      float:left;
      width:250px;
      display: inline-block; 
      margin-top:10px;
      margin-bottom:10px;
  
  }
  
  .ms-sellerprofile .seller-data div.avatar-box {
      margin-left: 10px;
      width:250px;
      text-align: left;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 22px;
      display: inline-block; 
      margin-top:10px;
      margin-bottom:10px;
  
  }
  
  .ms-sellerprofile .seller-data .info-box {
      margin-top: 10px;
      margin-left: 290px;
      text-align: right;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
  }
  
  .ms-sellerprofile .seller-data div.ms-badges {
      border: 0;
      margin-left: -240px;
     margin-top: 40px;
  }
  
  .ms-sellerprofile .seller-data div.info-box p {
      margin: 5px 0;
  }
  
   .ms-sellerprofile .seller-data div.info-box a {
      color: #38B0E3;
      text-decoration: underline;
  }
  
  .ms-sellerprofile .seller-description {
      clear: both;
      margin: 40px 0;
  }
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;div class="ms-sellerprofile"&gt;
      &lt;div class="seller-data"&gt;
              &lt;div class="avatar-box-img"&gt;&lt;a href="&lt;?php echo $seller['href']; ?&gt;"&gt;&lt;img src="&lt;?php echo $seller['thumb']; ?&gt;" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="avatar-box"&gt;&lt;a href="&lt;?php echo $seller['href']; ?&gt;"&gt;&lt;?php echo $ms_catalog_seller_products; ?&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="ms-badges"&gt;&lt;?php foreach($seller['badges'] as $badge) { ?&gt;
                  &lt;img src="&lt;?php echo $badge['image']; ?&gt;" title="&lt;?php echo $badge['description']; ?&gt;" /&gt;&lt;/div&gt;
              &lt;?php } ?&gt;
  
  
          &lt;div class="info-box"&gt;
              &lt;?php if ($seller['country']) { ?&gt;
                  &lt;p&gt;&lt;b&gt;&lt;?php echo $ms_catalog_seller_profile_country; ?&gt;&lt;/b&gt; &lt;?php echo $seller['country']; ?&gt;&lt;/p&gt;
              &lt;?php } ?&gt;
  
              &lt;?php if ($seller['company']) { ?&gt;
                  &lt;p&gt;&lt;b&gt;&lt;?php echo $ms_catalog_seller_profile_company; ?&gt;&lt;/b&gt; &lt;?php echo $seller['company']; ?&gt;&lt;/p&gt;
              &lt;?php } ?&gt;
  
              &lt;?php if ($seller['website']) { ?&gt;
                  &lt;p&gt;&lt;b&gt;&lt;?php echo $ms_catalog_seller_profile_website; ?&gt;&lt;/b&gt; &lt;?php echo $seller['website']; ?&gt;&lt;/p&gt;
              &lt;?php } ?&gt;
  
              &lt;!-- &lt;p&gt;&lt;b&gt;&lt;?php echo $ms_catalog_seller_profile_totalsales; ?&gt;&lt;/b&gt; &lt;?php echo $seller['total_sales']; ?&gt;&lt;/p&gt; --&gt; 
              &lt;p&gt;&lt;b&gt;&lt;?php echo $ms_catalog_seller_profile_totalproducts; ?&gt;&lt;/b&gt; &lt;?php echo $seller['total_products']; ?&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>