Search code examples
htmlcssborderstylesheet

Troubleshooting CSS border on Divs


I am currently building a grid layout web page as you can see here in this livelink. However I can not work out why the border is not showing up on my 'special offer' square and on my 'portfolio' square. I have tried everything! It is obviously a CSS issue but it works on every other square apart from these two. Could somebody please take a look at the livelink above and view the source code to try to work out why the border isn't working.

HTML OF ONE OF THE DIVS EFFECTED

<div class="trigger">
<div tabindex="0" class="testimony maincontent static"><div class="slider2">
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide1.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide2.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide3.png" height="200" width="200" /></div>
<div class="just_text"><div class="caption-box">Portfolio</div><img src="slide4.png" height="200" width="200" /></div>
</div></div>
</div>

HTML OF OTHER DIV EFFECTED

<div class="trigger large">
        <div tabindex="0" class="testimonywide maincontent staticlarge"><div class="slider">
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide1.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide2.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide3.png" height="200" width="400" /></div>
<div class="just_text"><div class="caption-box">Special Offer</div><img src="slide4.png" height="200" width="400" /></div>
</div></div>
    </div>
</div>

Solution

    • .trigger.large has a width of 400px.
    • .staticlarge (which is a child of the above) has a width of 400px plus 1px border. Its outer width is thus 402px.
    • .trigger has overflow: hidden so it clips the overflowing 2px.

    Solution is to remove hard-coded width of 400px on the child. If you must specify a width then specify one of these:

    • 398px
    • width: 100% + box-sizing: border-box
    • width: calc(100% - 2px)