Member Avatar for tmv105

I can't figure out why my liquid layout approach is working with one of my rows and not for my other. Here is the css I'm using...it works for the row3col1 and row3col2, but not for the row2col1ycaaa and the row2col2ycaas(here it doesn't float my information.

#row2col1ycaaa
{
margin-top: 10px;
float: left;
width: 48%;
}
#row2col2ycaaa
{
margin-top: 10px;
float: left;
margin-left: 3%;
width: 48%;
}
#row3col1
{
margin-top: 10px;
float: left;
width: 25%;
}
#row3col2
{
margin-top: 10px;
float: left;
margin-left: 3%;
width: 48%;
}

Now here's my html:

<br class="clearboth" />
<div class="spacer">&nbsp;</div>
<div id="row2co11ycaaa">
<h3><a href="<A href="">IST">">IST 420</a> &amp; <a href="<A href="">IST">">IST 421:</a><br />
York County Area Agency on Aging</h3>
<p>These courses provide an understanding of the
&quot;business processes and information value chain&quot;
within a system and foster an understanding of the
role of IT in system integration.
</p>
</div>
<div id="row2col2ycaaa">
<img src="../images/ycaaa1.jpg" alt="YCAAA &amp; PSY" width="310" height="150" />
</div>

<br class="clearboth" />
<div class="spacer">&nbsp;</div>
<div id="row3col1">
<img id="photo2" src="../images/paaaa.jpg" alt="Elderly Man and Woman" width="175" height="130" />
</div>
<div id="row3col2">
<p>York County Area Agency on Aging (<a target="_blank" href="<A href="http://www.ycaaa.org">YCAAA</a>)promotes">http://www.ycaaa.org">YCAAA</a>)promotes the independence of older adults through education, advocacy and
coordination of community-based services. The primary
commitment of the agency is to deliver quality services to older
adults with the greatest social or economic needs; as resources
allow, the agency may serve others with similar characteristics.</p>
</div>

Any ideas what's going on?

  • 2 Contributors
  • 2 Replies
  • 115 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good catch — this was a selector mismatch, not a mysterious float bug. As discovered, the HTML id did not match the CSS selector (a typed 1 where an l belonged), so the browser never applied the rules. Also note 's point: always post code inside code tags so others can read it clearly.

Quick checklist to avoid and diagnose this kind of problem:

  • Verify the element actually has the id/class your CSS targets. Use the browser DevTools “Inspect element” and look at the matched rules.
  • Prefer classes for repeated layout blocks instead of many unique ids. Classes make reuse and maintenance simpler.
  • Check specificity and rule order — a later or more specific rule can override the one you expect.
  • When using percent widths + percent margins, ensure the combined width <= 100% so floated siblings don’t drop.
  • Replace ad-hoc <br> clearing with a proper clearfix or parent containment so floats don’t escape their containers.

A small, safe clearfix pattern to include (apply to the parent of floated children):

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

Apply .clearfix to the container instead of inserting empty elements just to clear floats. If you need a quick containment alternative, overflow: auto or overflow: hidden on the parent can work, but be aware it may clip visible overflow.

For background reading and concrete examples see the MDN float docs (https://developer.mozilla.org/en-US/docs/Web/CSS/float) and a compact clearfix guide (https://css-tricks.com/snippets/css/clear-fix/). Use the W3C validator if markup looks malformed — mismatched tags or nested anchors can also break layout.

Recommended Answers

All 2 Replies

Member Avatar for tmv105

oops, I had a '1' instead of an 'l'....sorry. Noticed it when I posted the thread, not noticeable in text editor.

Member Avatar for MidiMagic

Please use code tags when posting code. Your code hid behind the ads.

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.