1

enter image description here

enter image description here

.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.

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:

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

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

1

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.

  • Thank you for your reply. The grid layout that I am going for is going to be used in the home page of my share point site. The cells will actually hold the web parts. cell 1 will be a slider and the rest will be regular web parts. – Aziz Qureshi Jun 16 '14 at 15:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.