Need Help with Layout

**dcuellar** · 10-31-2009, 04:13 PM

Hello,
I'm new here and had a question about one of the layouts you had in your library. It's the "CSS Left, Top, Bottom and Right Frames Layout". I'm trying to put this together as both a final project for class and a favor for a friend, but I can't seem to get it to work.

It's coming out perfectly in Safari and FF, but on IE6 I'm getting a space between the left frame and the main content. I've attached images of both so you can see.

I'm sure it's something simple because the sample you provide works fine on IE. I just can't spot it.

Here's my html:

Code:

<body>
	<div id="framecontentLeft">
	<div class="innertube">
		<div class="top_left"></div>
		<div class="middle_left"></div>
		<div class="bottom_left"></div>
	</div>
	</div>
	
	<div id="framecontentRight">
	<div class="innertube">
		<div class="top_right"></div>
		<div class="middle_right"></div>
		<div class="bottom_right"></div>
	</div>
	</div>
	
	<div id="framecontentTop">
	<div class="innertube">
	
	Logo Area
	</div>
	</div>
	
	<div id="framecontentBottom">
	<div class="innertube">
	Tips of the Day Area
	</div>
	</div>
	
	
	<div id="maincontent">
	<div class="innertube">
	
	
			<div class="middle_content">
			Top of Content<br />
			really long paragraph<br />
			Bottom of Content
			</div>
	
	</div>
	</div>

</body>

And here is my css:

Code:

body{
margin: 					0;
padding: 					0;
border: 					0;
overflow: 					hidden;
height: 					100%; 
max-height: 				100%; 
font-family:				'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size:					10pt;
}

#framecontentLeft, #framecontentRight{
position: 					absolute; 
top: 						0;
left: 						0; 
width: 						20%; /*Width of left frame div*/
height: 					100%;
overflow: 					hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}

#framecontentRight{
left: 						auto;
right: 						0; 
width: 						20%; /*Width of right frame div*/
overflow: 					hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}

#framecontentTop, #framecontentBottom{
position: 					absolute;
top: 						0; 
left:						20%;
right:						20%;
width: 						auto;
height: 					150px; /*Height of top frame div*/
overflow: 					hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background:					url('images/topbodybackfill.jpg') repeat-x;
}

#framecontentBottom{
top: 						auto;
height: 					150px; /*Height of bottom frame div*/
bottom: 					0;
background:					url('images/bottombodybackfill.jpg') repeat-x;
}

#maincontent{
position: 					fixed; 
top: 						150px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 					150px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 						20%; /*Set left value to WidthOfLeftFrameDiv*/
right: 						20%; /*Set right value to WidthOfRightFrameDiv*/
overflow: 					auto; 
background:					url('images/white_repeat.jpg') repeat;
}

.innertube{
margin: 					0px;
/*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 					150px 20% 150px 20%;
/*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 					100%; 
width:						100%
}

* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
width: 						100%;
}


/*
Middle Content
*/

.middle_content{
width: 						100%;
}

/*
Left Content
*/

.top_left{
background:					url('images/topleftcorner.jpg') top right;
height:						150px;
}

.middle_left{
background:					url('images/leftfill.jpg') repeat-y right;
height:						50000px
}

.bottom_left{
position:					absolute;
bottom:						0;
width:						100%;
background:					url('images/bottomleftcorner.jpg') no-repeat bottom right;
height:						150px;
}

/*
Right Content
*/

.top_right{
background:					url('images/toprightcorner.jpg') top left;
height:						150px;
}

.middle_right{
background:					url('images/rightfill.jpg') repeat-y left;
height:						5000000px
}

.bottom_right{
position:					absolute;
bottom:						0;
width:						100%;
background:					url('images/bottomrightcorner.jpg') bottom left;
height:						150px;
}

**dcuellar** · 10-31-2009, 07:19 PM

Alright. I've figured it out.

Apparently, IE had an issue with the width's of 20%. I changed them all to a set pixel amount and that seemed to fix it.

The whole reason for setting it to a percent was for flexibility across screen resolutions. Perhaps my view on that matter is incorrect though. I don't know, I'm still a newbie to css.

Thread: Need Help with Layout

Thread Tools

Search Thread

Need Help with Layout

Bookmarks

Bookmarks

Posting Permissions