Member Avatar for 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!

  • 3 Contributors
  • 4 Replies
  • 111 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by feblioz
Member Avatar for 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?

Edited by simplypixie
Member Avatar for 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.

Member Avatar for 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!

Edited by feblioz
Member Avatar for 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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.