Member Avatar for agent154

I'm making a simple resume online, and would like to know how to fix this problem I have..

As you can see in the image, my new header appears to the left of my "floating" lists. Anybody have any advice on how to fix it? Thanks for any advice.

Image is at 

<h3><span style="color:#000080;">Summary of Qualifications</span></h3>
Certified A+ and Network+ technician.
<h3><span style="color:#000080;">Technical Expertise
</span></h3>
<div>
<ul style="list-style:none;float:left;margin:0;padding:0;">
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Professional Certifications:</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">&nbsp;</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Item 2</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Item 3</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Item 4</li>
</ul>
<ul style="list-style:none;float:left;margin:0;padding:0;">
   <li style="list-style:none;padding-top:5px;padding-right:50px;">CompTIA A+ (<a href="https://www.certmetrics.com/comptia/public/verification.aspx?code=Z5MR82SBCDQQ1BHT">Z5MR82SBCDQQ1BHT</a>)</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">CompTIA Network+ (<a href="https://www.certmetrics.com/comptia/public/verification.aspx?code=NWSM0EGLCDV15KHM">NWSM0EGLCDV15KHM</a>)</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Australia</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Item 4</li>
   <li style="list-style:none;padding-top:5px;padding-right:50px;">Item 4</li>
</ul>
</div>
<h3><span style="color:#000080;">Education</span></h3>
<strong>Eastern College - St. John's, NL</strong> (10/09 - Present)
Information Systems Specialist+
Edited by agent154 because: n/a
  • 1 Contributor
  • 1 Reply
  • 136 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by agent154

Dani AI

Generated

This is a classic float/flow issue: floated elements are taken out of the normal document flow, so the next block-level element can slide up alongside them instead of below. Nice catch by — treating the lists as floats without clearing or containing them is what causes the header to sit to the left.

Three practical fixes (pick one that fits your layout):

  • Force the heading below floats:

    h3 { clear: both; }

  • Contain the floats with a simple clearfix on the parent container:

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    Add the clearfix class to the div wrapping the two lists so the container expands to include the floated children.

  • Move to modern layout (recommended for responsive resumes): use Flexbox or Grid instead of floats.

    .cols { display: flex; gap: 30px; }
.cols ul { margin: 0; padding: 0; list-style: none; }

Quick troubleshooting tips: inspect with developer tools and toggle outlines/backgrounds to see how elements occupy space; check computed styles for float/clear; verify all tags are properly closed. Avoid inline styles for layout — use classes in a stylesheet so it’s easier to maintain and test alternative layouts (flex/grid) later.

Further reading: MDN docs on the clear property and on Flexbox are useful references: MDN: clear property and MDN: Flexible Box Layout.

Member Avatar for agent154

aha, nevermind.. I solved it on my own by removing the "float:left;" from the second <ul>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.