Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Some CSS help please!

  • 30-06-2010 08:44PM
    #1
    mkahnisbent
    Closed Accounts Posts: 163 ✭✭


    I am trying to implement a blog based on http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

    I want to make the left menu a bit wider (maybe 100 pixels wider). Does anyone know what values in the CSS I need to change to do this? I've been at it for hours and can't figure it out!

    The CSS:
    [PHP]
    #layoutdims {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;
    text-align:right;
    }
    /* column container */
    .colmask {
    position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden; /* This chops off any overhanging divs */
    }
    /* 2 column left menu settings */
    .leftmenu {
    background:#FFD8B7;
    }
    .leftmenu .colright {
    float:left;
    width:200%;
    position:relative;
    left:200px;
    background:#fff;
    }
    .leftmenu .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:200px;
    padding-bottom:1em;
    }
    .leftmenu .col1 {
    margin:0 15px 0 215px;
    position:relative;
    right:100%;
    overflow:hidden;
    }
    .leftmenu .col2 {
    float:left;
    width:170px;
    position:relative;
    right:185px;
    }
    [/PHP]

    The HTML:
    [PHP]
    <div class="colmask leftmenu">
    <div class="colright">
    <div class="col1wrap">
    <div class="col1">
    <!-- Column 2 start -->
    <!-- Column 2 end -->
    </div>
    </div>
    <div class="col2">
    <!-- Column 1 start -->
    <!-- Column 1 end -->
    </div>
    </div>
    </div>
    [/PHP]

    Thanks :pac:


Comments

  • #2
    lil_lisa
    Registered Users, Registered Users 2 Posts: 1,829 ✭✭✭lil_lisa


    Try increasing the value of
    .leftmenu .colright {
    float:left;
    width:200%;
    position:relative;
    left:200px;
    background:#fff;
    }

    to the value you want.


  • #3
    mkahnisbent
    Closed Accounts Posts: 163 ✭✭mkahnisbent


    Thanks for the reply lil_lisa.

    Changing that value does increase the size of the left column, but it doesn't move the right column, so you end up with the left column covering some of the right column.

    I think a few of the values have to be changed at the same time.

    ultimate-2-column-left-menu-pixels-dimensions.gif

    ultimate-2-column-left-menu-div-structure.gif


  • #4
    Trojan
    Registered Users, Registered Users 2 Posts: 16,415 ✭✭✭✭Trojan


    As mentioned above, does changing this not work?
    .leftmenu .colright {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
left:300px;
position:relative;
width:200%;
}

    (line 119 of the linked code)

    If not, then I think you're doing something wrong. This works fine, even with a width of 600px here. Check in a different browser also.

    🎙️ The Recognized Authority Podcast



Advertisement