Jump to content

Divs With Auto Height Inside A Div With Auto Height?


I-R-Fool
 Share

Recommended Posts

Ok, I'm creating a neat little website, but it requires me to put auto height div's inside another auto heigthed div, but when ever I auto height the div's thats inside the other one, the other one stops auto heighting itself.Heres my .css:

body{	background:url(images/bg.gif);	text-align: center;}Div.bg {	left:0px;	top:0px;}Div.header {	background:url(images/header.gif) center no-repeat;	height:157px;}Div.fill_bg {	background:url(images/main_bg.gif) center repeat-y;	height:auto;	min-height:200px;}* Div.content {	height: 200px;} Div.menu_bar {	background:url(images/menu_bar.gif) center no-repeat;	height:27px;}Div.content  {	background:#ffffff center;	width:882px;	margin-right: auto;	margin-left: auto;}Div.left {	float:left;	width:210px;}Div.middle {	float:left;	width:462px;}Div.text {	width:442px;	float:right;	text-align:left;}Div.right {	float:right;	width:210px;}Div.side_left {	background:url(images/side_top_left.gif) no-repeat;	height:19px;}Div.bg_left {	background:url(images/side.gif) repeat-y;	height:auto;	min-height:120px;}* Div.bg_left {	height: 120px;} Div.heading {	background:url(images/heading.gif) center no-repeat;	height:19px;}Div.side_right {	background:url(images/side_top_right.gif) no-repeat;	height:19px;}Div.bg_right {	background:url(images/side.gif) repeat-y;	height:auto;	min-height:120px;}* Div.bg_right {	height: 120px;} Div.footer {	background:url(images/footer.gif) center no-repeat;	height:57px;}

And heres my html:

<Html><Head><Title>Untitled-1</Title><Meta http-Equiv="Content-Type" content="text/html; charset=iso-8859-1"><LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"></Head><Body style=""><Div class="bg">	<Div class="header"></Div>		<Div class="fill_bg">			<Div class="menu_bar"></Div>				<Div class="content">			<Div class="left">				<Div class="side_left"></Div>				<Div class="bg_left">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </Div>			</Div>								<Div class="right">				<Div class="side_right"></Div>				<Div class="bg_right">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </Div>			</Div>						<Div class="middle">				<Div class="heading"></Div>				<Div class="text">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </Div>			</Div>					</Div>			</Div>		<Div class="footer"></Div>	</Div></Body></Html>

Link to comment
Share on other sites

I'm trying to make a nice layout, that requires me to auto the bg, because the content is going to be dynamic.setting div's with auto height helps me with this.But I fixed my problem, made a new class, called it .clearheres its css:

.clear{clear:both;}

then I added a div with the class clear inside my content div, just before the closing tag, and it worked like a charm

Link to comment
Share on other sites

The mor modern way, which avoids extra markup, is to give overflow: auto or overflow: hidden to the element that contains the floated boxes. In order to make it work properly in all browsers, the container must also have a set width (Internet Explorer and Opera, I believe).

Link to comment
Share on other sites

Using a class allows the same CSS to be given to other elements, too.
ah ah, right you are good sir!
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...