Creating a Two-Column Wide Module with CSS

There's been some requests in the forum topics lately on how to create a module similar to Martha Stewart's Dreamers Into Doers network at http://dreamers.marthastewart.com/, where you have one module that takes up both the left and center columns. This tutorial will illustrate how it can be done using only CSS.

First, a caveat: As this is a CSS hack, this requires intermediate knowledge of CSS as well as using the Advanced tab of the Appearances page, available under the Manage menu. If you're not comfortable with that, you may want to look at other ways of customizing your Ning Network.

This is the image we're using for our example (this was take from Flickr from wirralwater under a Creative Commons license at the url http://www.flickr.com/photos/wirralwater/3840113957/).  Notice that we've made the image 741 pixels wide -- this is the width of the combined left and center columns, with some additional padding.  We recommend that if you're using an image that you also make the image 741 pixels large so it fits into the space nicely.

To begin, we created two textbox modules in the left and center columns. We will put the bulk of the code needed to put the photo in the center textbox, but we need the left column so we can create a space high enough so the image in the center textbox can spill into the left. For this reason, it's highly recommended that you put these text boxes at the very top of your layouts instead of towards the bottom, as heights can be variable.

Once you created the two textbox modules, you'll add the HTML wrappers -- you'll need these HTML tags because we'll use CSS in the Advanced Tab to add the image and make sure the image fits the two columns properly. We'll use CSS to modify <div id="space"></div> appropriately for this; the HTML code <div id="spotlight" class="space">ADD CONTENT HERE</div> is also needed for both columns to push the HTML textboxes to the proper height.  Save these two modules with this HTML code; the modules will look empty, but that's okay -- we'll be adding the appropriate CSS under the Advanced Tab in the Appearances page, under the Manage menu. Let's go there now and add the code.

Here is the CSS code we used to properly display the image of the temple to two columns. For those not as familiar with CSS, I'll step through this line by line:

.module_text .xg_module_body {overflow:visible;}

Make sure you include this line in your CSS; this is important. This allows an image wider than the column itself to spill into the left column.

.space {height:364px;} /*Height of the Hero Area */

This allows the left and center columns the appropriate height of pixels, in our case 364 pixels. Note: If you are using your own image, replace 364 with the height of your image.

#spotlight { 

All the code between the "#spotlight {" line and the "}" is CSS that should be a part of the div tag with the id of spotlight.

margin-left:-245px;

This is the actual line of code that shifts your image 245 pixels to the left, which conveniently is the width of the left column. This is required.

width: 741px;

The div should be the width of the column which is 741 pixels.

 } 

All the code between the "#spotlight {" line and the "}" is CSS that should be a part of the div tag with the id of spotlight.

#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}

Adding this line assures that images and embeds added will not contain extra padding and margin so that it fits the full width of the box.

<embed wmode="opaque" width="100%" height="100%" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="noscale" allowscriptaccess="always" allowfullscreen="false" bgcolor="#" quality="high" src="[SWF URL]">