Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!


How do I make a box span across multiple columns with boxes in columns below it?

I want one box to span all 3 columns at the top, but still have 3 columns below it. Is that possible?
Last Updated: Feb 26, 2013  |  6072 Views

Was this helpful? 4   0



While this is possible, it requres using CSS. The underlying structure of the system does not allow for this to be done without CSS. So if you're not comfortable using CSS, you should not do this. :)

LibGuides will not work for this hack, you must have LibGuides CMS in order to do this kind of individual guide-level customization.

Internet Explorer 7 is usual. There is nothing we can do about that, unfortunately. Basically, when you add space between the top box and the other boxes (as explained below), you'll need to add more space than you would otherwise to compensate for IE7's quirks. This means that there will be extra, unnecessary space between the boxes in all other browsers, including IE 8 & 9. All other browsers seem to behave the same's only IE7 that is an issue. *sigh*

Okay, now that the warnings are out of the way, let's get down to business...

Add the Boxes to the Page & Get Their IDs

Even if you don't have any content in the boxes yet, at least get them on the page. You need the box IDs to complete the process. :)

Find the box ID by hovering over the edit link in the upper right hand corner of the box.

When you write the box IDs down, make sure you note which ID is for which box.

Create the Code

First you're going to make the top box wider, so it spans all of the columns.

Then you're going to add a margin to the top of the boxes in the 2nd and 3rd columns so they appear below the top box. (The 2nd box in the 1st column doesn't need this margin - the box above it puts it in the right place.)

#wrapboxtopboxID { position: relative; width: 975px; height: xxxpx; }
#contentcenter #wrapboxcenterboxID, #contentright #wrapboxrightboxID { margin-top: xxxpx; }

  • topboxID is the box ID for the top box in the left-hand column...the one that's going to span all columns.
  • centerboxID is the box ID for the first box in the center column.
  • rightboxID is the box ID for the first box in the right column.
  • xxx is the height of the top box in pixels...which is also the height of the margin for the first boxes in the center and right columns. This number should be the same in both lines. (If you use IE7, you might need to change the 2nd line's height.)

After adding content to the top box, you may need to adjust the height in the code to ensure that the box / spacing is correct.

Add the Code

  1. Go to Guide Look & Feel > Custom JS/CSS Code.
  2. Add the code you created to that box.
  3. Click Save.


Top Box Spanning 3 Columns:

CSS for that example:
#wrapbox6140813 { position: relative; width: 975px; height: 375px; }
#contentcenter #wrapbox6140831, #contentright #wrapbox6140832 { margin-top: 375px; }

Top Box Spanning 2 Columns:

CSS for that example:
#wrapbox628747 { position: relative; width: 975px; height: 510px; }
#contentright #wrapbox628750 { margin-top: 510px; }


When you're working on this in EDIT mode, the orange toolbar takes up extra room that would not otherwise be there in real life, so those few pixels it takes up in space may skew the display by not lining up the columns at equal heights.

Don't worry! This does not happen in the live page because the orange toolbar wouldn't be there. The best way to test the results of your work is to make the page visible and hit PREVIEW.

Answered by Anna BurkeBookmark and Share

Other Answers / Comments (10)

  1. With some reordering of the code, would it be possible to create this effect with a bottom box that spans the length of three columns instead of the top box?
    by Melissa on May 15, 2012.
  2. Absolutely, Melissa! All you need is the majority of the first line: #wrapboxBOXID { position: relative; width:975px; } Of course, you'll want to make sure that the boxes in the other columns are not lower than the box you're spanning across the bottom...otherwise the bottom box will cover the other boxes. ;)
    by Anna Burke on May 15, 2012.
  3. Hi Anna! My question is the same as Melissa's: I'd like to have a box spanning 2 columns, but on the bottom. I'm struggling to figure out how to alter the code to make that work...can you give me a hint when you have a minute? Just a rough example of how the code needs to be arranged will probably be enough to jump-start me. :)
    by Priscilla on Feb 20, 2013.
  4. Hi Priscilla, When spanning multiple columns, and there are boxes above the box that span multiple columns, you'll use the same code, and same steps as the FAQ states. As Anna states above - "Of course, you'll want to make sure that the boxes in the other columns are not lower than the box you're spanning across the bottom...otherwise the bottom box will cover the other boxes. ;)" As an added note - we're working on making this easier :) Be on the look out in the next few months for updates!
    by Zinthia Briceno on Feb 20, 2013.
  5. Finally got it. :)

    I think box order may have been tripping me up? I rearranged the boxes in my 2 columns, and suddenly it looked right.

    by Priscilla on Feb 20, 2013.
  6. Way cool! Glad it's working!
    by Zinthia Briceno on Feb 20, 2013.
  7. Wouldn't it be possible to do this without CMS by putting all the CSS inside one of the boxes? I have found that CSS in a box can apply to the entire page. For example, display:none will remove the banner from a single page.
    by Ted Waller on Mar 26, 2013.
  8. Hi, Ted,
    You're right that CSS in a single box will apply to the whole page, but not to the whole guide. That CSS would have to be replicated on each page in the guide. If something goes wrong, or if that guide changes hands, it might be a lot of work to chase down errors. :)

    To easily apply CSS to all the pages in a guide, LibGuides CMS is required. CMS also has groups - you can apply CSS across a group of guides as well as a single guide.

    Hope this helps! :)

    by Cindi Trainor on Mar 26, 2013.
  9. Hi!

    The code works great for the box spanning three columns, but we're using it on our home page where we also have a expandable subject guide list, which pushes down the other boxes and covers the spanned box. has anyone had this problem before?
    by Mia on Jun 06, 2013.
  10. Hi Mia! Zinthia here from the support team!
    Have you tried moving the social media box to be in the column as the subject drop down menu?
    That should do the trick!
    by Zinthia Briceno on Jun 07, 2013.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.


Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help