colspan for div tags

Question

.mainTable{ display:table; width:100%; border-collapse:collapse; } .topRow{ display:table-row; background-color:fuchsia;

border-spacing:5px;

} .bottomRow{ display:table-row; background-color:#F2F2F2;

border-spacing:5px;

}

.cell1, .cell2, .cell3, .cell4, .cell5, .cell6{ display:table-cell;

padding:10px;

}

-->

            <div class="topRow">

                <div class="cell1"><div                style="width:50px;height:50px; background-color:white; float:left;">1</div>
                </div>


                    <div class="cell2"><div    style="width:50px;height:50px; background-color:white; float:left;">2</div>
                    </div>


            </div>

            <div class="bottomRow">

                <div class="cell3"><div  style="width:50px;height:50px; background-color:white; float:left;">3</div>
                </div>

                <div class="cell4"><div style="width:50px;height:50px; background-color:white; float:left;">4</div>
                </div>

                <div class="cell5"><div style="width:50px;height:50px; background-color:white; float:left;">5</div>
                </div>

                <div class="cell6"><div style="width:50px;height:50px; background-color:white; float:left;">6</div>
                </div>

            </div>

    <!--</div>-->

I have the above scenario. I am not using table tags because in share point page layouts table tags don't go well. so I am using div as display:table. With the above style and html I am getting the result shown in the pink boxes image. But now I want to expand the cell 1 till cell 5 as shown in reb boxed image below the pink boxed image. Please help. Thanks a million.

Answer 1

If you like to read more on basics how to set up a grid system that matches your requirements I can recommend you the following link:

• All about floats on CSS Tricks
• Don't overthink it grids on CSS Tricks

I think with these two basic articles you can full fill your requirement.

Answer 2

Before considering using a third party tool, think about how often you will use it and if it's worth the additional risks of a third party framework. Not to mention that it will likely add unused code to the SP which will have an impact on the performance.

If you only want a few layouts just do them yourself - it took me a few seconds to alter yours for a 3 colspan layout.

Have a look

Answer 3

You're on the right track using divs instead of tables. Tables should really only be used for true tabular data anymore, and using them for layout purposes is basically considered a hack.

To achieve the grid model you're looking for, I'd recommend you reference a third party grid system. There's tons to choose from, and including a third party grid CSS is a heck of a lot easier than creating your own. Many of them are compatible with SharePoint without having to make any major changes, and it'll add a ton of flexibility to your layout.

Bootstrap is quite popular, as are unsemantic, 960 grid system (non responsive), Foundation and Skeleton. If you're just looking to add a grid to a single page as opposed to an entire page layout or masterpage, then something like the Responsive Grid System is probably the easiest, since you can easily add a few lines of CSS to a CEWP and you're off to the races.