How do I make a left-aligned unordered list to the right of a left-aligned picture?


Tags: html,css,list

Problem :

I have an un-ordered list with bullet points. I use two of these lists, first the left of a right-aligned image, and then to the right of a left-aligned image (without the list being right-aligned). The first list shows up fine, but the second list has the text appear to the right of the image, but the bullet points do not.

Is there a way that I can align the list to the right of the image?

Here is a screenshot of the page: http://i.stack.imgur.com/qXz8n.png

And here is the stylesheet and html:

ul.nobullet {
    list-style-type: none;
    padding: 0;
    margin-left: 2em;
}

li.globe { 
    background: url(images/earthbullet.jpg) no-repeat left top; 
    height: 20px;
    padding-left: 25px;
    padding-top: 4px;
    margin-left: 3em;
}

p.bottom {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 500px;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> Going Green </title>

    <meta name="author" content="" />
    <meta name="description" content="Home page for Green Home" />
    <meta name="keywords" content="Assignment 1" />

    <link rel="stylesheet" type="text/css" href="greenstyle.css">

</head>
<body>
    <h1><font color="green">GREEN HOME ENVIRONMENT</font></h1>

    <p>
        Getting Greener conducted a green audit for a family of five that lives east of Seattle.<br>
        Getting Greener found that the homeowner used more electricity than the average household.<br>
        Any additional energy produced by the panels could be sold back to the public utility company.<br>
        The homeowners also invested in an electric car that runs on the solar electric energy provided by the panels.<br>
    </p>

    <h3>This homeowner:</h3>

    <p>
        <img src="images/solar.jpg" alt="Home installation solar panels" align="right">
        As you can see in the picture on the right, photovoltaic solar panels are installed on the 
        roof of the home. The panels face south to get the most sunshine possible throughout the day. 
        The green audit showed us how many panels the home needed, based on the family's average 
        electricity consumption. This family's consumption includes an energy-efficient furnace and air
        conditioner, energy-efficient appliances, energy-efficient windows and doors, and
        energy-efficient lightbulbs throughout the house. Additionally, the entire family is energy 
        aware and responsible.
        <ul class="nobullet">
            <li class="globe">Approximate annual savings is <b>$5,087</b></li>
            <li class="globe">Installation can be completed within one week</li>
            <li class="globe">Government and tax incentives are available</li>
            <li class="globe">Public utility company hook-up quick and easy</li>
            <li class="globe">Savings begin immediately</li>
        </ul>
    </p>

    <div style="clear: both;"></div>

    <p>
        <img src="images/car.jpg" alt="An electric car" align = "left">
        The homeowners also invested in an electric car to make their lives more green. The car
        is plugged into an outlet in the garage, so the power needed to run the car comes completely
        from the solar panels mentioned above. There are many energy efficient cars on the market 
        today. Some states have tax incentives for people who buy these cars. Review reports online
        to see which car might best suit your needs.
        <ul class="nobullet">
            <li class="globe">Approximate annual savings is $6,087 over a gas-fueled vehicle</li>
            <li class="globe">Car gets 244 miles per charge</li>
            <li class="globe">Homeowner can travel to Seattle daily for weeks on one charge</li>
            <li class="globe">Car is stylish</li>
            <li class="globe">Savings begin immediately</li>
        </ul>
    </p>

    <p class="bottom">
        The pictures above show two things that you can do as a homeowner to make your home 
        more environmentally responsible. To have your own green audit, please call us at
        <b>(999) 555-GREEN</b> or e-mail us at <b>gettinggreener@isp.com</b>. <br>

        If you use e-mail, please include the following information: <br>

        (1) your address and phone number, (2) the approximate energy usage of your household (if known), and (3) a few days and times that are 

convenient 
        for for us to contact you. We will send an e-mail response back to you to let you know that
        we did receive your request.
    </p>
</body>
</html>


Solution :

I found out how to do it: add the overflow: hidden; to the ul CSS like so:

ul.nobullet {
    list-style-type: none;
    padding: 0;
    margin-left: 2em;
    overflow: hidden;
}

Mali303 has a good explanation for this here:
http://stackoverflow.com/a/13037482/4530832


    CSS Howto..

    How to make

    How can I :hover over different links in one line while getting the spacing correct?

    How can I use development tools to find css class of a plugin item

    How to create a texture paper background using CSS without image

    How to add html in language file of opencart 2.0.1.1?

    How to make div access the remaining space without using fixed height values?

    How to put text on the center of a circle using CSS

    Are there limits to how tall/wide CSS Sprite-maps can be?

    How load a table into multiple webpages using HTML?

    How can I create alike css classes [duplicate]

    How can I center three tables in a div?

    How to reset a css animation class using jquery?

    How to create this responsive grid of different sized images with CSS & HTML, example below

    How do I apply a CSS to a clutter stage?

    CSS How to hide text after a span

    How to implement a CDN failsafe for css files?

    How to change buttons to pictures in jquery dialog

    How to strongly force line-height in css, with no streches?

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to add elements to an specified position without influence of other elements?

    How do I apply CSS style to ASCII character

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    How can I fix the menu on the implanted header?

    How to properly apply a css hack for IE11 transition misbehaviour

    How to use :hover css when mouse is down

    How to Change XYChart's color in JavaFx?

    Find how an element's css has changed after jQuery “toggle” function has been used

    How to overide CSS for width?

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    CSS dropdown submenu with dynamic width: how to align left?