Log in

View Full Version : Some basic margin / centering help



springtime
05-27-2008, 08:50 PM
I am using one of the Fluid-Fixed-Fluid layouts from this site (http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-36-fluid-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/TEST_fluid-fixed-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;
}

boogyman
05-27-2008, 09:04 PM
[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
when posting computer code :) its formatted in a way that's easier for us "helpers" to debug and review

springtime
05-28-2008, 02:05 AM
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.

boogyman
05-28-2008, 02:29 PM
search google for "faux columns"

springtime
05-29-2008, 02:07 AM
I think..... I finally have a solution. Thanks again boogyman.