While working on a website coding project, I encountered a puzzling issue. The layout consists of two columns with float: left, along with margin: 0 and padding: 0. Within these columns are blocks.
When the blocks are empty, everything seems fine, and I can add text without using <p> tags. However, when I include <p> tags in the blocks, the parent columns mysteriously gain some extra padding.
Interestingly, if I remove the float:left property (so only one column remains), I can use <p> tags inside the blocks without affecting the parent element's padding.
While I could find a workaround for this issue, I'm curious to understand why it occurs and how to reverse this unexpected behavior. If anyone has insights or solutions, please feel free to share them.
You can view a live demonstration of the problem here.
<style>
#html, body{
margin: 0;
padding: 0;
height: 100%;
font-size: 100%;
}
#pagewrap {
padding: 0 20px;
width: 960px;
height: 100%;
margin: 0 auto;
background: #CCC;
}
.test {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background: #00F;
clear: both;
}
.column {
width: 480px;
margin: 0;
padding: 0;
float: left;
background: #0F0;
}
.column2 {
width: 480px;
margin: 0;
padding: 0;
background: #0F0;
}
.lefty {
min-height: 100px;
width: 470px;
margin: 0 10px 10px 0;
padding: 0;
background: #999;
}
.righty {
min-height: 130px;
width: 470px;
margin: 0 0 10px 10px;
padding: 0;
background: #999;
}
</style>
<div id="pagewrap">
<div class="test"></div>
<div class="column">
<div class="lefty">
<p></p>
</div>
<div class="lefty">
<p></p>
</div>
</div>
<div class="column">
<div class="righty">
</div>
<div class="righty">
</div>
</div>
<div class="test"></div>
<div class="column2">
<div class="lefty">
</div>
<div class="lefty">
</div>
</div>
<div class="test"></div>
<div class="column2">
<div class="lefty">
<p></p>
</div>
<div class="lefty">
<p></p>
</div>
</div>
<div class="test"></div>
</div>