0

Just a simple issue, one element has to be center horizontally. So, margin:0px auto has been applied. It was centered but other rule to this element doesn't work properly. For example If top-bottom padding is applied, bottom padding doesn't show any changes. I set height auto, doesn't work. But when I add overflow:hidden, it works. I think adding overflow:hidden isn't best idea in here. To my knowledge, overflow:hidden is used and has to be work in that condition, where element height is less than content and to hide rest of content which cannot be covered within height.

<html>
<head>
<style>
*{
  margin:0px;
  padding:0px;
}
article{
  width:100%;
  background:red;
  float:left;
  margin-bottom:10px;
}
.section{
  width:93%;
  max-width:1400px;
  padding:10px 0px;
  margin:0px auto;
  height:auto;
}
.section1{
  width:93%;
  max-width:1400px;
  padding:10px 0px;
  margin:0px auto;
  overflow:hidden;
}
aside{
  float:left;
  width:48%;
  background:yellow;
  height:auto;
}
aside:first-of-type{
  margin-right:10px;
}

</style>
</head>
<body>
<article>

  <!-- Adding overflow hidden -->
  
  <section class="section1"> 
    <aside>
    This is date Section
    </aside>
    <aside>
    This is lang Section
    </aside>
  </section>
</article>

<article>

  <!-- Not addding overflow hidden -->
  
  <section class="section">
    <aside>
    This is date Section
    </aside>
    <aside>
    This is lang Section
    </aside>
  </section>
</article>

</body>
</html>
Dipak
  • 931
  • 14
  • 33
  • You're also dealing with floats. Welcome to [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). – j08691 Jun 20 '18 at 14:34
  • At this point, there's no real reason to use float for layout anymore. Take a look into the flexbox spec - it takes a bit of time to wrap your head around at first but it's completely worth it. – jmcgriz Jun 20 '18 at 15:15

0 Answers0