Simulate collapsed borders with DIVs

I had a situation where I wanted to have a number of boxes, arranged in rows of up to 3, in a table-like layout, but using floated DIVs instead of a table.  The problem is, when you add borders around the boxes using DIVs, they “double up” where DIVs are next to each other.  Using a table layout instead, you could specify border-collapse:collapse; and that situation goes away.  It does not appear to do so for DIVs.  Here’s an illustration:

floatingboxes_problem

Notice the area in the green rectangle.  The borders where the DIVs adjoin are clearly visually thicker than the outer borders where no other DIV adjoins.

My initial styling looked like:

            div.boxcontainer {
                width: 561px;
                font-size:large;
                text-align:center;
                background-color:#ffffff;
                float:left;
                margin-left: 10px;
            }

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                border: 1px solid #aaa;        
            }                
                
            div.oneLine {
                margin-top:80px;
            }
            div.twoLines {
                margin-top:70px;
            }
            div.threeLines {
                margin-top:60px;
            }
            div.fourLines {
                margin-top:50px;
            }
            div.fiveLines {
                margin-top:40px;
            }

And my example markup for the boxes shown in the image above like this:

<div class="boxcontainer">

    <!-- insert new items here, at the top of the list: -->

    <div class="campaignbox">
        <div class="twoLines">
            <a href=".">My top-left<br />bx</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Example<br />three<br />liner</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="oneLine">
            <a href=".">Cool Stuff Here</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="threeLines">
            <a href=".">Well<br />hello<br/>there</a>
        </div>
    </div>
    <div class="campaignbox">
        <div class="fiveLines">
            <a target="_blank" href=".">This<br />Box<br />Has<br />Much<br />to Say</a>
        </div>
    </div>

</div> <!-- boxcontainer    -->

After some googling and a bit of trial-and-error, I adapted this technique for my own use.

Basically the only thing I needed to change was the campaignbox style.  I replaced the border attribute with the box-shadow as described in the article I linked above:

            div.campaignbox {
                float: left;
                width: 185px;
                height: 185px;
                background-color: #def;
                margin:0x;
                padding:0px;
                  /* And here comes the trick to collapse
                     the borders.  Based on: http://codepen.io/Hawkun/pen/rsIEp */
                  box-shadow: 
                    1px 0 0 0 #AAA, 
                    0 1px 0 0 #AAA, 
                    1px 1px 0 0 #AAA,   /* Just to fix the corner */
                    1px 0 0 0 #AAA inset, 
                    0 1px 0 0 #AAA inset;
            }

Everything else stayed the same, but now my borders are properly collapsed, as shown below:

floatingboxes_fixed

Advertisements

0 Responses to “Simulate collapsed borders with DIVs”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Scott’s recent tweets…


%d bloggers like this: