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;
}
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;
}