I-R-Fool Posted July 5, 2009 Share Posted July 5, 2009 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 More sharing options...
Ingolme Posted July 5, 2009 Share Posted July 5, 2009 I'm not sure what effect you're expecting. Putting "auto" height on a <div> is like not setting any height at all. Link to comment Share on other sites More sharing options...
I-R-Fool Posted July 6, 2009 Author Share Posted July 6, 2009 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 More sharing options...
thescientist Posted July 11, 2009 Share Posted July 11, 2009 you could just set the div to 'clear: both' rather than making its own class, no? Link to comment Share on other sites More sharing options...
jlhaslip Posted July 11, 2009 Share Posted July 11, 2009 Using a class allows the same CSS to be given to other elements, too. Link to comment Share on other sites More sharing options...
Ingolme Posted July 11, 2009 Share Posted July 11, 2009 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 More sharing options...
thescientist Posted July 12, 2009 Share Posted July 12, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.