No replies
shazbat
Offline
newbie
Last seen: 11 years 34 weeks ago
Joined: 2007-03-13
Posts: 1
Points: 0

Hi guys

I'm currently working on a hybrid layout - a combination of fixed and liquid containers. Its in its rawest form and Ive not actually applied ANY styles,graphics/images yet as I want to get the resize working correctly cross-browser.

The design is optimised for 1024w but will work from 760>. The main liquid containers/content is set at 90% of the viewport and has a min(760px)and max(1200px)width set:

.inner-container { width: 90%; margin-right: auto; margin-left: auto; text-align: left; min-width: 760px; max-width: 1200px; }

I then set a JavaScript expression used to emulate min/max-width for ie 6 which works ok:

* html .inner-container { width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1202? "1200px" : "auto"); }

I then created left(#left-side) and right(#right-side) side cols for the body content. The left side is liquid, the right side is fixed at 280px and uses a negative margin in order to resize correctly:

#left-side { background: #fff url(../images/left_faux_side.gif) repeat-y top left; float: left; width: 100%; padding-top: 44px; }

#right-side { background: #fff url(../images/right_faux_side.gif) repeat-y top right; float:left; width: 280px; margin-left:-280px; padding-top: 44px; }

I then created a div to go inside of the left content (#lsc) and set the right margin to 350px to set it off against the negative #right-side margin:

#lsc { margin-right:350px; float:left; padding-left: 40px; margin-left: 0; }

Everything was working ok, until I viewed it in IE6 Sad The right content is way off the page. I know this is due to the margin-right:350px declaration but not sure how to get around it for IE6. Any ideas???

Thanks in advance everybody:-)
Full html and css below:

!--html-->

Cyonix Homepage












Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque, eros vel interdum laoreet, sem leo auctor mauris, et porta metus arcu ac dui. Sed non turpis. Pellentesque tincidunt odio nec pede. Praesent ornare augue quis nunc vulputate aliquam. Curabitur tempus sapien interdum risus. Proin urna. Mauris congue ultrices odio. Fusce porttitor arcu nec velit. Aliquam erat volutpat. Quisque mattis enim id nibh. Aenean tempor lacinia tortor. Etiam nisi. Praesent tortor. Quisque rhoncus sagittis mi.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque, eros vel interdum laoreet, sem leo auctor mauris, et porta metus arcu ac dui. Sed non turpis. Pellentesque tincidunt odio nec pede. Praesent ornare augue quis nunc vulputate aliquam. Curabitur tempus sapien interdum risus. Proin urna. Mauris congue ultrices odio. Fusce porttitor arcu nec velit. Aliquam erat volutpat. Quisque mattis enim id nibh. Aenean tempor lacinia tortor. Etiam nisi. Praesent tortor. Quisque rhoncus sagittis mi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque, eros vel interdum laoreet, sem leo auctor mauris, et porta metus arcu ac dui. Sed non turpis. Pellentesque tincidunt odio nec pede. Praesent ornare augue quis nunc vulputate aliquam. Curabitur tempus sapien interdum risus. Proin urna. Mauris congue ultrices odio. Fusce porttitor arcu nec velit. Aliquam erat volutpat. Quisque mattis enim id nibh. Aenean tempor lacinia tortor. Etiam nisi. Praesent tortor. Quisque rhoncus sagittis mi.


















/***css
****************/

/* css reset ********************************/ * { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
p, table, dl, ul, ol { margin: 10px 0; }
ul, ol, dl dd { margin-left: 40px; }

html { min-height: 100%; margin-bottom: 1px; } /* FireFox Page-Shift Fix */

/* general
********************************/

body {
margin: 0;
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* main containers
********************************/

#header {
width: 100%;
height: 120px;
background: red;
}

#content {
width: 100%;
}

#header p, #advert p {
margin: 0;
}

body#home #advert {
width: 100%;
background: green;
height: 300px;
}

.inner-container {
width: 90%;
margin-right: auto;
margin-left: auto;
text-align: left;
min-width: 760px;
max-width: 1200px;
}

.pad-content {
padding: 0 40px 0 40px;
}

* html .inner-container {
width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1202? "1200px" : "auto");
}

#left-side {
background: #fff url(../images/left_faux_side.gif) repeat-y top left;
float: left;
width: 100%;
padding-top: 44px;
}

#right-side {
background: #fff url(../images/right_faux_side.gif) repeat-y top right;
float:left;
width: 280px;
padding-top: 44px;
}

#sidebar {
float: left;
padding-right: 40px;
}

#lsc {
margin-right:350px;
float:left;
padding-left: 40px;
margin-left: 0;
}

/** html #lsc {
float:left;
padding-left: 40px;
background: red;
margin-right:0px;
}*/

#footer {
clear: both;
display:block;
width: 100%;
background: yellow;
margin-bottom: 0;
height: 200px;
}