pterodactyl Posted March 6, 2007 Share Posted March 6, 2007 I have 2 boxes. One under another. What I would like to do is to set height for box that is on top so it pushes the second box down all the way. What do I put in height: or is there some other way to do it. Thank you. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 6, 2007 Share Posted March 6, 2007 Might work. Are you using a CSS file?Can we see some code??? Link to comment Share on other sites More sharing options...
pterodactyl Posted March 7, 2007 Author Share Posted March 7, 2007 div#box_one { background-color:#FFFFFF; width: 17%; margin:0; padding:0; height:400px; border: 1px solid #000; } div#box_two { width: 17%; height: 150px; padding: 0px; margin: 0px; border: 1px solid #000; } Link to comment Share on other sites More sharing options...
jlhaslip Posted March 7, 2007 Share Posted March 7, 2007 height:400px; <== change this to a larger number... should work, might depend on the Browser being used. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> An XHTML 1.0 Strict template </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="expires" content="Mon, 01 Jan 1995 00:01:01 CST" /> <meta http-equiv="keywords" content="keywords list here, comma seperated" /> <meta http-equiv="description" content="insert a description here." /> <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" /> <meta http-equiv="author" content="Jim Haslip" /> <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" /> <link rel="stylesheet" type="text/css" href="style_file_here.css" /><style type="text/css">/*<![CDATA[*/* html { margin:0; padding:0;}html, body {height: 100%;}#wrapper { /* div you want to stretch */min-height: 100%;}body { margin:0 auto; text-align:center; }#wrapper { margin: 0 auto; width:1000px; background-color: #ffeecc; border: 1px solid #666666; }#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }#header h1 { margin: 1em 0; }p { margin: 1em; padding:1em; text-align:left }#footer { margin: 1em auto; padding: 1em; text-align:center; border-top: 1px solid #666666; }#footer a { margin: 1em auto; padding: .15em; }div#box_one { background-color:#FF0000; width: 17%; margin:0; padding:0; height:999px; border: 1px solid #000; } div#box_two { width: 17%; height: 150px; padding: 0px; margin: 0px; border: 1px solid #000; }/*]]>*/</style><!--[if lte IE 6]><style type="text/css">#wrapper {height: 100%;}</style><![endif]--> </head> <body> <div id="wrapper"> <div id="header"> <h1> ... Page Header here ... </h1> </div><!-- header --> <div id="box_one"> </div> <div id="box_two"> </div> <div id="footer"> <a href="http://validator.w3.org/check?uri=referer">validate the xhtml</a> <a href="http://jigsaw.w3.org/css-validator/">validate the css</a> </div><!-- footer --> </div><!-- wrapper --> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now