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
  • 120 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by feblioz

Dani AI

Generated

This thread demonstrates a few of the small markup and CSS gotchas that push an element out of its intended box. Useful points already raised by (invalid tags and unclosed anchors) and (total widths, ordering and margins) are the right places to start; the final fix turned out to be a tiny selector typo, which is a common source of head-scratching bugs.

Practical checklist to reproduce and prevent the problem:

  • Validate the HTML to catch invalid or out-of-place tags and unclosed elements; browsers sometimes “fix” bad markup in unexpected ways. Try the W3C Markup Validator.
  • Inspect the DOM and computed styles with the browser dev tools to see which rules apply, whether an image is larger than its container, and whether margins/padding/widths sum to more than the wrapper.
  • Contain floats (use a clearfix or overflow workaround) or switch to modern layout (flexbox/grid) so columns don’t collapse or spill.
  • Use max-width on images (or responsive techniques) so they can’t overflow a fixed-width box.
  • Watch selector semantics: a space often changes meaning from “element with this class” to “descendant of this element,” which can silently cause rules to miss.

Recommended next steps: fix the markup first (proper list vs. stray li usage), then use the inspector to toggle the suspected property (margin, width, float). For learning and quicker feedback, use a modern editor like Visual Studio Code with live preview and built-in linters, and consult MDN for selector and layout behavior (see CSS Specificity). These practices avoid brittle fixes and make layout bugs easier to track down.

Recommended Answers

All 4 Replies

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?

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

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.