Controlling column width in Bandzoogle

People often come up to me on the street and say “Hey, Kelly. How do you get your columns in your Bandzoogle-hosted website pages to be uneven?”. Well, actually the previous statement is only half true. The true part is that I do manage to control the column widths on my pages. The bit about people approaching me on the street is patently untrue–they tend to cross over to the other side of the street and look away.

Now, let’s suppose that Bandzoogle is not hosting your music website. Then this blog post is probably not for you, unless you want to learn a little HTML and CSS trick, or you have a similar issue with your HostBaby site. So let’s dig in!

Here is what my news page currently looks like:

Adhering to the “rule of thirds”, this page has two columns of content, the left one taking up roughly 2/3 of the page width, while the right column takes up–anybody, anybody?–that’s right: 1/3 of the page! (Aren’t we all glad we signed up for math in the 5th grade?)

The Bandzoogle page designer, on the other hand, provides no direct way to do this. It will automatically assign equal width to your columns, as in the following example:

So how did I accomplish the uneven columns, thereby embracing the aesthetic rule of thirds?

Simple. Simple, of course if you know a little HTML and CSS. If not, follow these instructions:

First, add a simple Text page feature to the bottom of the left column of your layout:

Now go in and edit its content. First, click the HTML button in the right end of the formatting toolbar so that you can enter HTML code directly. Now enter the following code:

<div style="width: 600px;">
Hope you enjoyed the news!

Geek speak: By creating a <div> tag with a specific width, it forces the containing table, which you have no control over, to readjust its column width distribution. Theoretically, you wouldn’t need to put any text there, but if you leave it out, the site builder sometimes removes all of the code. So, putting some text there keeps the <div> thing there. Of course, you can experiment with the width, do this with the right column instead, and use some other text, perhaps a couple of unobtrusive dots. (Don’t use only the literal “non-breaking” space &nbsp;.)

So there! I have scratched my “share something geeky” itch and perhaps you learned something helpful.

Until next time!



Filed under Music Career

6 responses to “Controlling column width in Bandzoogle

  1. Thanks for the tip Kelly, just put it to good use. :) (Had to change the first quotation mark for it to work, btw).

  2. Hi Geof! Glad you found the post useful. And thanks for letting me know about the right-handed quotes being inserted. Hopefully, I have fixed that. Cheers!

  3. Also, as you consider the tweaks that make your pages look great like following the rule of thirds, YouTube gives you the ability to embed videos at custom sizes to match your column width. Pretty cool.

    • Don’t know what to tell ya. You might try moving the magic div block it up to the top of your column. That may do the trick. If you have something in the other column that simply MUST have a certain amount of width, then your attempts to force width with div may not work, anyway. You never have complete control in this environment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s