CSS border bottom putting it at the top

  • We have a style in our theme stylesheet that was border-top: 2px blue solid; and I changed it to border-bottom but it still showed at the top and the div was collapsed even though everything inside it should have expanded it. Here’s an example:

    <div style="border-top: 2px blue solid">
    <a style="float: left" href="/blah"><img src="/blah/image.png">Blah</a>
    <div style="margin: 0px; padding: 10px; float: left; width: 320px">
        <a href="/some other link">Some Other Link</a>
        <p style="height: 36px; overflow: hidden; line-height: 16px; padding-top: 5px">Tips on Stuff.</p>
    </div>
</div>

    I had a hard time finding a good CSS forum, so can anyone advise on this and recommend a good forum?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We need to see the page in question to help with this.

    Thread Starter davehprohoods

    (@davehprohoods)

    After reading some more about CSS, I think I figured this out, though CSS is not that intuitive to me. I think it is because the two divs inside are floated, which means the encapsulating div has no determined height before the border is drawn, so it is actually at the bottom, but the bottom edge of the div is at the top.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS border bottom putting it at the top’ is closed to new replies.