Results 1 to 5 of 5

Thread: Some basic margin / centering help

  1. #1
    Join Date
    May 2008
    Posts
    12
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Some basic margin / centering help

    I am using one of the Fluid-Fixed-Fluid layouts from this site (http://www.dynamicdrive.com/style/la...d-fixed-fluid/). Running into a problem with the margins/centering and hoping there's an easy fix to this.

    See this:
    http://www.newton-designs.com/icpixx...ixed-fluid.htm

    On my (standard size) monitor, everything looks peachy. However if you view on a larger monitor, my layout is all out of whack. All I want is for the fixed-width centerwell (white) to be centered, with EQUAL size grey columns flanking it (grey columns being equal to each other... and liquid). Obviously I mistakenly set this up for proper viewing only with my own monitor specs, but need it more universal.

    I know the secret lies in the margins. How do I fix this?!

    Thank you in advance for any help you can give.

    #contentwrapper{
    float: left;
    width: 100%;
    margin-left: -13%; /*Set left margin to -(RightColumnWidth)*/
    }

    #leftcolumn{
    margin: 0 760px 0 13%; /*Set margin to 0 (contentWidth) 0 (RightColumnWidth)*/
    background: #666666;
    }

    #content{
    float: left;
    width: 760px; /*Width of left column in pixels*/
    margin-left: -760px; /*Set left margin to -(contentWidth)*/
    background: #FFFFFF;
    }

    #innertube{
    padding:15px
    }

    #rightcolumn{
    float: left;
    width: 13%; /*Width of right column in percentage*/
    background: #666666;
    }

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    [quote]
    #contentwrapper{
    float: left;
    width: 100%;
    margin-left: -13%; /*Set left margin to -(RightColumnWidth)*/
    }
    [quote]

    change the blue to whatever width you want, however be aware of your audience... just because you have a certain resolution doesn't mean that everyone has that

    and in the future please use [code][/code] when posting computer code its formatted in a way that's easier for us "helpers" to debug and review

  3. #3
    Join Date
    May 2008
    Posts
    12
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Thanks boogyman... and sorry about the missing [code] tags... I will remember those next time

    So I tried your fix, but that doesn't help unfortunately. As it is, I am using the fluid-fixed-fluid suggested layout but my content is actually going in the middle (fixed) column and the side ones (both fluid) will be empty. As a result, I am probably unnecessarily using the contentwrapper div, but not sure how to get rid of that (I am new to CSS).

    All I am looking to do is have a centered, fixed-width centerwell and then have those side columns be a solid color, empty of content, and equal widths to each other, filling the screen to the edges. There must be an easier way!

    Any additional help is much appreciated. Thanks.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    search google for "faux columns"

  5. #5
    Join Date
    May 2008
    Posts
    12
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    I think..... I finally have a solution. Thanks again boogyman.

Bookmarks

Posting Permissions

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