How do I create a 2 column Page Layout in SharePoint 2010 with an invisible 20 px separation between the two columns? I'm stuck!

I`m newer to SharePoint 2010 Foundation and I need to create a custom page layout to fit inside my already created master page.

I need a 2 column layout w开发者_StackOverflow社区ith a 20px separation between the columns. (Separation needs to be invisible to allow the background image to show through)

I’m coming from the world of .html and .css and although that world and the SharePoint world are similar, they are not the same. And that is why I am looking to you internet to please help.

Down the road I will need to be able to adjust the widths of each column to fit different page layouts.

Any help would be greatly appreciated.

You should still be able to do what you need to with HTML and CSS.

Below is an off-the-top-of-my-head example, but I think you should get the picture of how you could do it.

In Master Page

<div id="container">

    <div id="column1" style="float: left;">

        <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" ></asp:ContentPlaceHolder>

    </div>

    <div id="column2" style="float: left; margin-left: 20px;">

        <asp:ContentPlaceHolder id="PlaceHolderColumn2" runat="server" ></asp:ContentPlaceHolder>

    </div>

</div>

In Page Layout

<asp:Content ContentPlaceholderID="PlaceHolderColumn1" runat="server">

     Your Column 1 Content

</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderColumn2" runat="server">

     Your Column 2 content

</asp:Content>

Another way:

<table width='100%'>
  <tr>
    <td width='50%'>
        <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" >   
        </asp:ContentPlaceHolder>
    </td>
  </tr>
  <tr>
    <td>
        <img src='1x1 trasnparent sharepoint image' width='20px' />
    </td>
  </tr>
  <tr>
    <td width='50%'>
        <asp:ContentPlaceHolder id="PlaceHolderColumn1" runat="server" >   
        </asp:ContentPlaceHolder>
    </td>
  </tr>
</table>

but you'll have to find the image, I don't remember the name..

Messy though it seems I am using :

<table width='100%'>
  <tr>
    <td width='48%'>
     Lorem ipsum dolor sit amet. 
    </td>
 <td width='2%'>
     &nbsp;
    </td>
 <td width='48%'>
     Lorem ipsum dolor sit amet,  
    </td>
  </tr>
</table>