Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I center the middle content area of a 3 column layout?

    Is it possible to center the middle content area using this tutorial? http://matthewjamestaylor.com/blog/perfect-3-column.htm

    If so, how would I do that?

    I am trying to learn CSS to build my site, but having trouble with this issue...My site is: http://www.shoptoastcreative.com

    My css is below...
    <style media="screen" type="text/css">
    /* <!-- */
    /* General styles */
    body {
    margin:0;
    padding:0;
    border:0; /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px; /* Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
    }
    a img {
    border: none;
    }
    h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
    }
    p {
    margin:.4em 0 .8em 0;
    padding:0;
    }
    img {
    margin:10px 0 5px;
    }
    /* Header styles */
    #header {
    clear:both;
    text-align: center;
    width:100%;
    }
    #header p,
    #header h1,
    #header h2 {
    padding:.4em 15px 0 15px;
    margin:0;
    }

    /* column container */
    .colmask {
    position:relative; /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden; /* This chops off any overhanging divs */
    }
    /* common column settings */
    .colright,
    .colmid,
    .colleft {
    float:left;
    width:100%; /* width of page */
    position:relative;
    }
    .col1,
    .col2,
    .col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
    only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
    }
    .col1 .boximg {
    padding:0 0 0 5px;
    }
    /* 3 Column settings */
    .threecol {
    background:#fff; /* right column background colour */
    }
    .threecol .colmid {
    right:25%; /* width of the right column */
    background:#fff; /* center column background colour */
    }
    .threecol .colleft {
    right:50%; /* width of the middle column */
    background:#fff; /* left column background colour */
    }
    .threecol .col1 {
    width:46%; /* width of center column content (column width minus padding on either side) */
    left:102%; /* 100% plus left padding of center column */
    }
    .threecol .col2 {
    width:21%; /* Width of left column content (column width minus padding on either side) */
    left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    }
    .threecol .col3 {
    width:21%; /* Width of right column content (column width minus padding on either side) */
    left:85%; /* Please make note of the brackets here:
    (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    }
    /* Footer styles */
    #footer {
    clear:both;
    width:100%;
    text-align: center;
    padding: 5px 2em;
    background: #6EAB23;
    }
    #footer p {
    margin:0;
    }
    /* --> */
    </style>

    I would love some advice/guidance!
    Thanks,
    CMP

  • #2
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Insert margin:auto into whichever bit off CSS refers to your middle column.

    (Sorry, your css confused me, your id's do not match up to the correct columns, according to your comments!)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    ou may find this interesting.

    It's free.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •