Text Not Aligning in Listed Items

  • Resolved danielcasciato

    (@danielcasciato)


    11 years, 5 months ago

    Hi,

    Hoping someone could assist me. I’m having an issue with a page on this site: http://culturalconfidence.com/events/

    I cannot get the third line under “Description” (…International Business Luncheon hosted by the Greater Austin Chamber of Commerce….) to align underneath the previous lines.

    Here is the style CSS for that section:

    eventsPageContainer {

    padding:0;

    }

    .eventsPage ul {

    margin: 20px 0;

    }

    .eventsPage ul li {

    margin-bottom: 5px;

    overflow: hidden;

    list-style: none;

    }

    .eventsPage ul li label {

    display: block;

    float: left;

    font-weight: 700;

    margin-bottom: 5px;

    width: 11%;

    }

    Any assistance would be greatly appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • RossMitchell

    (@rossmitchell)

    11 years, 5 months ago

    What is happening is that the ‘label’ component is floating left, it has a bottom margin which makes it high enough that the 2nd line of text keeps clear of it, but the label is not high enough to do this for the 3rd line.
    You could add a special class to this label, and give it extra bottom margin to make that one only 3 lines high, but don’t do it, when I make the screen narrower it soon enough spills to a 4th line.

    Instead I suggest:
    give the block: .eventsPage ul li a margin-left:11%;
    instead of using the width of the label to give the indent.
    Then for the block: .eventsPage ul li label give it a position relative.

    OR but the Date/Time/Location/Description into a table with 4 rows.
    Tables are detested when used to achieve layout solutions, but are acceptable whene there really is a table of data present, which you have.

    Thread Starter danielcasciato

    (@danielcasciato)

    11 years, 5 months ago

    Thank you, Ross! I created a table.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Text Not Aligning in Listed Items’ is closed to new replies.