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 .)
So there! I have scratched my “share something geeky” itch and perhaps you learned something helpful.
Until next time!