Question

I’d like to move facebook and twitter buttons and make them more visible on my temporary site:

gaberivers.com

Now they are below the footer and no one can see them. I’d like to move it next to the 1st text column. Outside of that text box…that way people would see it much better.

Demo:

http://jsfiddle.net/ZWq8g/

Answer 1

Okay, so if I understand correctly, you’re trying to move your Facebook and Twitter images to the left of your columns. So lets make a new column, called columnSocial and in the CSS:

#columnSocial {
line-height:120px;
background-color:#394046;/*background: url(black.jpg) no-repeat 0 0;*/
width:64px;
height:250px;
float:left;
position:relative;}

I copied most of that from your existing columns — be sure to edit one of the other columns width down to accommodate (your column container only allows 900px, so you need to shave off 36px somewhere else) this new column. The line-height attribute is useful to get some vertical spacing, since we can’t use vertical-align on div elements.

In your HTML, you will need to add:

<div id="columnSocial">
     ...
</div>

After your container begins and before column1 begins. Feel free to toggle any of the numbers as you like, but that should get something similar to what you were asking for.

As a general design note, having good structure (like a container for your columns) takes a lot of the work out of changes like this — it ended up being trivial to move the images, since all we had to do was make a new column.