image is not inside the class

[feblioz]

threeCols left, center, right{

width:296px;
height: 250px;
float:left;
background: url(img01.jpg) repeat-x left top;
text-align:left;
padding:10px;
border-radius:10px;

}

threeCols left, center{

margin-right: 25px;

}

threeCols right{

float: right;

}

    <div id = "threeCols">
        <left>
            <a href="#"><img src="images/1.png" alt="" />
        </left>
        <center>
            <a href="#"><img src="images/2.png" alt="" />
        </center>
        <right>
            <a href="#"><img src="images/3.png" alt="" />
        </right>
    </div>

anyone know why my 3.png is not inside the box i created? 1.png and 2.png are perfectly fitted into the boxes left and center.

thanks in advance for helping!

[simplypixie]

Your centre image needs a left and right margin and your right div needs to come before your center div in the html. Have you checked all your widths and padding aren't totalling to wider than the containing div?

[LaxLoafer]

Hi Feblioz

It's not immediately obvious what's wrong.

However, there are quite a few errors in you code that perhaps you need to correct first...

• Your 'a' tags are not properly closed
• Left and Right are not valid elements for HTML
• The stylesheet might not be applied in quite the way you expect, e.g. consider "#threeCols left, #threeCols centre {", instead of "threeCols left, center {".

Did you create the code in notepad? You may find it easier to work in a dedicated HTML editor with support for HTML and CSS validation.

[feblioz]

I changed my code to this.

    <div id = "threeCols">
        <li>
            <a href="#"><img src="images/1.png"  alt="" />
        </li>
        <li>
            <a href="#"><img src="images/2.png"  alt="" />
        </li>
        <li class="last-item">
            <a href="#"><img src="images/3.png"  alt="" />
        </li>
    </div>

After some trial and error, it worked. but i still need to change my last li to not have margin right.
i tried using

threeCols li .last-item{

margin-right:0px;

}

and

threeCols li:last-child{

margin-right:0px;

}

but it doesnt work. not sure why. Do you know whats wrong?

@laxloafer yep, i use notepad++, just started learning css. Could you recommend me a good text editor? thanks!

and thanks guys for helping!

[feblioz]

oh oh.. now it works.

changed it to #threeCols li.last

my mistake was having a space between li and .last

:D

@laxloafer yep, i use notepad++, just started learning css. Could you recommend me a good text editor? thanks!