Unordered lists used to format content

Posted on 2014-08-19
Last Modified: 2014-08-19
On the following page,, I do not understand how the unordered list is used to format the  content so that it appears the way it does. For example, how do the first two pictures (and their accompanying text)  appear side by side instead of below each other (as they would typically appear) if you used an unordered list? To format content so that it appears across a page, you would normally use either a <div> or a <table>.

If someone could explain to me how it works, I would appreciate it. I have attached the code as well as the relevant parts of the CSS.
Question by:geeta_m9
    LVL 18

    Accepted Solution

    If you inspect the element using your browsers dev tools, you can see the CSS that's being used. In this case, the list elements are being floated, which allows them to sit side by side.

    ul.program-list li {
    float: left;
    display: inline;
    width: 260px;
    margin: 0 40px 40px 0;

    Open in new window

    More about CSS floats:

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now