Advanced Search

Results 1 to 2 of 2

Thread: height:auto not working on a floated div

  1. #1
    Join Date
    Mar 2006
    Location
    Nashville, TN
    Posts
    600
    Thanks
    5
    Thanked 4 Times in 4 Posts

    Unhappy height:auto not working on a floated div

    I need the divs "left_container" and "right_container" to expand 100% in height to its parent container "main_container". Anytime I change a set height on the .main_container the left and right container div disappears. I assume its just under the main_container though..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML Document</title>
    <style type="text/css">
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    	}
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    	}
    body {
    	color: black;
    	background: #333 fixed;
    
    	}
    ol, ul {
    	list-style: none;
    	}
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    	}
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    	}
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    	}
    blockquote, q {
    	quotes: "" "";
    	}
    	
    
    .main_container{
    	/*width:936px;*/
    	width:936px;
    	height:18px;
    	background: #F00;
    	padding-top:18px;
    	margin-top:35px;
    	clear:both;
    	
    }
    
    .left_container{
    	float:left;
    	width:18px;
    	height:100%;
    	background:#C06;
    }
    
    .right_container{
    	float:right;
    	width:18px;
    	height:100%;
    	background:#0C0;
    }
    
    
    
    .middle_container{
    	float:left;
    	text-align:left;
    	width:900px;
    	min-height:500px;
    	background: #F60;
    	/*padding:20px 20px 20px 20px;*/
    }
    
    
    .bottom_container{
    	width:936px;
    	background: #F00;
    	height:18px;
    	clear:both;
    }
    
    	
    	</style>
    </head>
    
    <body>
    <div align="center">
    <div class="main_container">
    	<div class="left_container"></div>
        <div class="middle_container">
        Content Here<br />
        </div>
        <div class="right_container"></div>
    <div class="bottom_container"></div>
    </div>
    
    
    
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •