Jump to content

Problem with container


Ida
 Share

Recommended Posts

Can anyone help me please.I need to get a container to expand (like a table does) in height when the content expands. Is this possible? It looks fine in IE but not in Firefox and Opera. It is the menu that is placed in the layoutContainer that continues outside the layoutConainer. You can see how it looks now here: http://www.visioni2i.se/ida/om_kristallforum.htmlHere is the css code:

/* --------Layout------ */#container {	width: 750px;	MARGIN-LEFT: auto;  	MARGIN-RIGHT: auto;	}	#bgTopShadow {	float:left;	width: 750px;	height: 7px;	background:url(top_shadow.gif) no-repeat;	background-position: bottom left;}#middleContainer {	float:left;	width: 750px;	height:100%;	vertical-align: top;	background-color:#FFFFFF;	}  #bgLeftShadow {	float:left;	width: 7px;	height: 424px;	background:url(left_shadow.gif) repeat-y;	}	#bgStartLeft {	float:left;	width: 430px;	height: 424px;	background:url(bg_start.gif) repeat-x;	padding:0px;	}#bgStartRight { 	float:left;	width: 306px;	height: 424px;	background:url(krona_start.jpg) no-repeat;	}#bgRightShadow {	float: left;	width: 7px;	height: 424px;	background: url(right_shadow.gif) repeat-y;	}	#bgBottomShadow {	float: left;	width: 750px;	height: 7px;	background:url(bottom_shadow.gif) no-repeat; 	}	#introtext {	width: 350px;	position:relative;	top: 40px;	padding: 0;	margin: 0 auto;		}	#logoStart {	margin: 0 auto;	width: 236px;	}	#erbjudandeStart {	float: right;	}  	#bgMenu {	float: left;	width: 146px;	height: 424px;	background:url(leftbar.jpg) no-repeat;	background-color:#041B5F;	padding-left: 20px;	padding-right: 20px;	padding-top: 90px;	}	#main {	float:left;	width: 300px;	height: 100%;	background-color:#FFFFFF;	background-position:bottom right;	height:auto;	padding-left: 30px;	padding-top: 40px;	margin: 0;	}	#boxMenu {	float:left;	postition: relative;	width: 140px;	margin: 0 auto;	padding-left: 20px;	padding-right: 20px;	padding-top: 90px;	top: 180px;	height:auto;	}	#layoutContainer {	float:left;	width: 736px;	height:auto;	background:url(bgLayout.gif) repeat-y;	background-position:top;	background-color:#FFFFFF;	padding-left: 7px;	padding-right: 7px;	overflow: visible;	}#bgOmKristall {	float:right;	width: 182px;	height: 427px;	background:url(empire6_oxid.jpg) no-repeat;	vertical-align:bottom;	background-position:bottom right;}

Thanks!

Edited by Jonas
Link to comment
Share on other sites

The problem is you have given the bgmenu a set height.This is ok in IE as you say cos it will expand as needed but it shouldnt thats why Firefox and other browsers dont.Thats what min-height is for but IE does not recognise this so you carnt use that either.But I would just remove the set height for bg menu and it will size to fit the content and thats it.

Link to comment
Share on other sites

No you carnt it still dont expand the div as needed then.Here take a look at the exaple I made to show ya.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>See</title><style>#look {     height: 200px;     width: 200px;     border: medium double #f00;     overflow:visible;}</style></head><body><div id="look">noigfnbonods dnfousirvn nerovnoelsnvubn rnvoiuneilnvoiur ntbnornbol neroiunvoirtngob iotrnbonrtb nbirtnmobirtnobir rntoibnrtnb bntrbnortfnob brtnibnortb tgnibtrnbofntob booinbotnrobnt botnboitlb noigfnbonods dnfousirvn nerovnoelsnvubn rnvoiuneilnvoiur ntbnornbol neroiunvoirtngob iotrnbonrtb nbirtnmobirtnobir rntoibnrtnb bntrbnortfnob brtnibnortb tgnibtrnbofntob booinbotnrobnt botnboitlb noigfnbonods dnfousirvn nerovnoelsnvubn rnvoiuneilnvoiur ntbnornbol neroiunvoirtngob iotrnbonrtb nbirtnmobirtnobir rntoibnrtnb bntrbnortfnob brtnibnortb tgnibtrnbofntob booinbotnrobnt botnboitlb noigfnbonods dnfousirvn nerovnoelsnvubn rnvoiuneilnvoiur ntbnornbol neroiunvoirtngob iotrnbonrtb nbirtnmobirtnobir rntoibnrtnb bntrbnortfnob brtnibnortb tgnibtrnbofntob booinbotnrobnt botnboitlb </div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...