Giving HTML/CSS Django website creation a shot for the first time, appreciate your patience. I'm using a basic resume template and trying to troubleshoot an issue right from the beginning (template in question here).
In one section of my website, there's a visual glitch (here). The 1px line meant to divide sections is appearing below the headings instead of after the entire content of the section. This problem only occurs with stacked elements like these two sections.
The HTML code snippet causing this issue:
<div class="yui-gf">
<div class="yui-u first">
<h2>Skills</h2>
</div>
<div class="yui-u">
<div class="talent">
<h2>Multi-System Design</h2>
<p>Proven experience with robotic systems spanning mechanical, electrical, and software backgrounds.</p>
</div>
<div class="talent">
<h2>Interpersonal Reporting</h2>
<p>Familiarity with reporting, documentation, and organization of technical design documents.</p>
</div>
<div class="talent">
<h2>Problem Based Solutions</h2>
<p>Involvement with team based, problem driven projects that solve a question rather than a set task.</p>
</div>
</div><!--// .yui-u -->
</div><!--// .yui-gf -->Here is the relevant CSS:
.yui-gf {
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: 1px solid #ccc;
}
.last {
border: none;
}
.talent {
width: 32%;
float: left;
}
...
Frustratingly, I can't figure out why the spacing+divider is not aligning correctly with the elements, even though everything seems enclosed within the yui-gf container. Any insights would be greatly appreciated!