Scaling multiple images in fluid layout

**Harvengure** · 02-28-2010, 03:34 AM

Going to try and re-word this so it's clearer. I'm trying to create a fluid (or liquid) site...I've got a three column liquid layout and have layered several images on top of each other using z-index...positioning them absolutely in relation to each other. The css scales the lowest image so far (the images not having been included int he code below) but does not seem to scale any of the other images.

Any thoughts?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="762917.css" type="text/css" />
<!--[if IE]><style type="text/css">
img,
p {
	width: 100%;
}
</style><![endif]-->
</head>
<body><div id="pagewidth" style="display" ><div id="wrapper" class="clearfix" ><div id="twocols" class="clearfix"><div id="maincol" ><img src="container" alt="Book" style="z-index:-1;"><div id="index" style="z-index:1; position:absolute; top:29px; left: 50px; width:50%;"><img src="A" alt="description"></div>
</div></div></div>
</body>
<script type="text/javascript">
document.documentElement.style.overflow = 'hidden';	 // firefox, chrome
document.body.scroll = "no";	// ie only
</script>
<script type="text/javascript">

function reflow() {
    var photo = document.getElementById("img");
    img.style.border = img.style.border;
}

window.onload = reflow;

</script>

</html>

And the CSS

Code:

/* generated by csscreator.com */ 
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center;
} 
img {
	max-width: 100%;
	min-width:1%;
}
#pagewidth{ 
 width:100%; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;
 position:relative;
} 
 
#leftcol{
 width:10%; 
 float:left; 
 position:relative; 
  }
 
#twocols{
 width:90%; 
 float:right; 
 position:relative; 
  }
 
#rightcol{
 width:12%; 
 float:right; 
 position:relative; 
 }
 
#maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative; 
 width:88%; 
 }
 

 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
img {
	max-width: 100%;}

}

And please, don't be afraid of being harsh. I realize it's very sloppy but I am more concerned of getting it to work then with anything else at this point. :P

If I was unclear on anything I will try my best to better explain.

Thank you in advance.

**Harvengure** · 04-20-2010, 01:16 AM

Turns out it's the absolute positioning that breaks the scaling on images. Will try to see if I can not somehow figure out a way around this, despite my very limited coding skills.

**BLiZZaRD** · 04-20-2010, 06:22 PM

Have a look here It may help with design problems. When using Absolute as well as relative positioning you have to watch out for these types of crazy placements. Since 2 elements can't occupy the same space and all.

Thread: Scaling multiple images in fluid layout

Thread Tools

Search Thread

Scaling multiple images in fluid layout

Bookmarks

Bookmarks

Posting Permissions