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. #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. #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
  •