Best 2 Column Width CSS - top left of home page

[Jen]

Ernie of Team Ning has shared the best 2 column width CSS I've seen, yet. This 2 column width text box only fills the area of the page, that you specify. The advantages of this particular method are:

• Retains the normal module formats, below the 2 column width box.
• Allows you to add via CSS, and a small block of script in Analytics Box.

You can see the perfect example here:
http://dreamers.marthastewart.com/
I will insert screen shot below.


Follow Ernie's instructions here (see text box HTML change, below.):
http://developer.ning.com/notes/Creating_a_Two-Column_Wide_Module_w...

I use the following HTML in the text boxes, instead of the HTML in example, above. Basically, I found that adding DIV height, produced more reliable results.

Left Text Box Content

<div id="space" style="height:364px!important;"></div>

Center Text Box Content
<div id="spotlight" class="space" style="height:364px!important;">your image goes here.</div>

Summary:

• Follow Ernie's Example, word for word.
• Come back here, and use the HTML above, for your text boxes. Adjust the DIV height to fit your image height.

Thanks Ernie!

[Chris Payne]

Hey Jen.
This is a great hack.
I'm experiencing a conflict with another hack I previously used to move the main column to the left.
http://help.ning.com/cgi-bin/ning.cfg/php/enduser/std_adp.php?p_faq...

Heard of this from anyone else?
Any help would be great.

Check out my work in progress at http://thevabeat.ning.com

Thanks!

[Jen]

Hi Chris,
Like your style!

Were you able to add the 2 text boxes side-by-side? It seems to missing a text box above the music player. And it appears in FireFox, you have your image in the left text box?

If you answer that, I'll try to move forward, and see if we can get it to work.

Be sure you have 2 text boxes side-by-side.

LEFT TEXT BOX SHOULD CONTAIN:
<div id="space" style="height:300px!important;"></div>

RIGHT TEXT BOX SHOULD CONTAIN:
<div id="spotlight" class="space" style="height:300px!important;"><img src="http://farm3.static.flickr.com/2719/4293585892_97bb954b90_o.png"></div>

[Chris Payne]

thanks so much for the reply.

i have the two text boxes at the top.
and i entered all the code.

now it seems as tho the left column covers the inserted content.

Here is what i have for code.

.module_text .xg_module_body {overflow:visible;}
.space {height:364px;} /*Height of the Hero Area */
#spotlight {
margin-left:-515px;
width: 741px;
}
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}

.xg_widget_main_index_index .xg_3col .xg_1col {
float:right;
margin-left:-245;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
margin-left:0;
}
#homelayout div.column {
float:right;
}

Thanks again.
#homelayout div.col2 {
float:left;
}
#homelayout div.col1 {
margin-right:115px;
margin-left:-230px;
}
* html #homelayout div.col1 {
margin-right:0;
}

[Jen]

If you can stand it, don't change anything. I'm about to grab a bite of lunch. I will look at this in the next hour.

[Chris Payne]

you're helping me, so take your time!
thanks!

[Jen]

Hi Chris,

Here's what I discovered. I tested this on a test site using the following:
1. Code to move wide column to left
2. This code we're working on, to widen top left text box (flowing 2 boxes into 1)
All I had to change was this line:
#spotlight { margin-left:-515px; width: 741px;}
to:
#spotlight { margin-left:-5px; width: 741px;}
and it works perfectly. But, it doesn't want to work with your CSS.

Here's the order of things on my test site:
1. Code to move wide column to left, at very bottom of CSS.
Here's the exact code I'm using:

/* Move the Wide Column (center) to Left */
.xg_widget_main_index_index .xg_3col .xg_1col {
float:right;
margin-left:0;
}
.xg_widget_main_index_index .xg_3col .xg_2col {
margin-left:0;
}
#homelayout div.column {
float:right;
}
#homelayout div.col2 {
float:left;
}
#homelayout div.col1 {
margin-right:115px;
margin-left:-230px;
}
* html #homelayout div.col1 {
margin-right:0;
}
/* End Move Wide Column Center to Left */


2. Widen top left text box (flowing 2 boxes into 1) is at very top of CSS.
Here is the CSS I'm using:

/* 2 Column Splashbox */
.module_text .xg_module_body {overflow:visible;}
.space {height:300px;}
#spotlight { margin-left:-5px; width: 741px;}
#spotlight img, #spotlight embed, #spotlight object {padding:0;margin:0;max-width:741px;}
/* END 2 column Splashbox */

3. Don't forget to make sure your 2 text boxes contain what I provided earlier.

Also, I'm attaching an image of my Feature Panel, so you can see where I have the boxes placed.

Maybe these tips will help you get this to work. I hope so. Wish I had a simple answer.

Best,
Jen

[Jen]

Chris - - I put the test site online just for today, so you can see the results, live.
http://ourtestsite5.ning.com/

[Chris Payne]

this is perfect!
thanks so much.
all i had to do then, is switch the contents of the text boxes on the main page.

you are a life saver.
here is a link to my real site. http://therichmondscene.com
i'll be adding your help to it soon.

thanks again!
chris

[Jen]

Great!
:-)