August 25, 200917 yr Hi guys, im very new to this forum and i thought this would be the best place to come for some much needed bit of help! Im working on a small website project for a friend whereby ive developed a basic site using HTML & CSS but i am really struggling to set auto height for a few DIV's. Ive tried so many things and even one solution already listed in this forum, but i cannot get it to work! The website consists of a basic 'header', 'body' and 'footer' layout. I need to achieve auto height for the main 'body' DIV, as well as auto height for the two smaller DIVs called 'text' and 'side' that sit inside the 'body' div. Ive attached the HTML file and CSS files below. Any help would be greatly appreciated! Many thanks, index.html style.css style_ie.css
August 25, 200917 yr Hi, I'm going to bed now, but tomorrow I will help you . If you figure it out please post here for me to know. Regards and good night
August 26, 200917 yr Hi there, I have to go to work now, I just didn't put de body in the center. I also cleaned your code . HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Worklinx - The self-employed workforce</title> <link rel="stylesheet" media="all" type="text/css" href="style.css"><!--[if IE]> <link rel="stylesheet" media="all" type="text/css" href="style_ie.css" /> <![endif]--> </head> <body> <div id="global"> <div id="header"> <img class="displayed" src="newlogo2.gif" alt="worklinx"></div> </div> <div class="nav"> <div class="table"> <ul class="select"> <li> <a href="#nogo"><b>Home</b></a> </li> </ul> <ul class="select"> <li> <a href="#"><b>About Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Our Goal </a></li> <li><a href="#nogo">Our Values </a></li> <li><a href="#nogo">Why Use Worklinx </a></li> <li><a href="#nogo">Partners </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Services</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub show"> <ul class="sub"> <li><a href="#nogo">Construction </a></li> <li><a href="#nogo">Installation </a></li> <li><a href="#nogo">Maintenance </a></li> <li><a href="#nogo">Repairs </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Sub-contractors</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">About our sub-contractors </a></li> <li><a href="#nogo">Working for Worklinx </a></li> <li><a href="#nogo">The Application Process </a></li> <li><a href="#nogo">Join Us </a></li> <li><a href="#nogo">FAQ </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Contact Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Request a Sub-contractor Application Pack </a></li> <li><a href="nogo">Request a call back </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <div id="body"> <br /> <br /> <br /> <div id="text"> <h2>Welcome to Worklinx</h2> <p>Welcome to Worklinx - the UK's only construction, installation, maintenance and repair company powered solely by a vetted workforce of self-employed sub-contractors and tradesmen.</p> </div> <div id="side"> <p>side boxes</p> </div> </div> <div id="footer"> <p class="links"> <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="ourservices.html">Our Services</a> | <a href="oursubcontractors.html">Our Sub-contractors</a> | <a href="contactus.html">Contact Us</a> <br /> <br /> <a href="sitemap.html">Sitemap</a> | <a href="contactus.html">Contact Us</a> | <a href="legal.html">Legal</a> | <a href="privacy.html">Privacy</a> <br /> <br /> Copyright © 2007-2009 Worklinx. All rights reserved </p> </div> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Worklinx.co.uk presents valid HTML 4.01 Transitional" height="31px" width="88px" border="0" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0px; width:88px; height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Worklinx.co.uk presents valid CSS" /> </a> </div> </body> </html> Here is the CSS: * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-family: "arial", verdana, sans serif; text-align: center; min-width: 770px; background-color: #ccc; overflow: auto; border: 0px; } #global { margin: 0px auto; } #header { margin: 0px auto; height: 100px; width: 900px; border: 1px solid #414142; background: #fff url("slogan.gif") no-repeat scroll center right; } img.displayed { display: block; text-align: left; margin: 6px auto 0px 15px; } .nav { height: 35px; background: url(dropline_0.gif) repeat-x; position: relative; font: bold 12px arial, verdana, sans-serif; width: 900px; border-left-style: solid; border-right-style: solid; border-color: #414142; border-width: 1px; margin: -1px auto; z-index: 500; } .nav .table { display: table; margin: 0 auto; } .nav .select, .nav .current { margin: 0px; padding: 0px; list-style: none; display: table-cell; white-space: nowrap; } .nav li { margin: 0px; padding: 0px; height: auto; float: left; } .nav .select a { display: block; height: 35px; float: left; background: url(dropline_0.gif); padding: 0px 30px 0px 30px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #fff; } .nav .current a { display: block; height: 35px; float: left; background: url(dropline_2.gif); padding: 0 0 0 15px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #ffffff; } .nav .current a b { display: block; padding: 0px 30px 0px 15px; background: url(dropline_2.gif) right top; } .nav .select a:hover, .nav .select li:hover a { background: url(dropline_1.gif); padding: 0px 0px 0px 15px; cursor: pointer; color: #fff; } .nav .select a:hover b, .nav .select li:hover a b { display: block; float: left; padding: 0 30px 0 15px; background: url(dropline_1.gif) right top; cursor: pointer; } .nav .select_sub { display: none; } .nav table { border-collapse: collapse; margin: -1px; font-size: 1em; width: 0px; height: 0px; } .nav .sub { display: table; margin: 0px auto; padding: 0px; list-style: none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background: transparent; color: #f00; } .nav .select :hover .select_sub, .nav .current .show { display: block; position: absolute; width: 900px; top: 35px; background: url(back_0.gif); padding: 0; z-index: 100; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; left : -1px; right : 0px; text-align : center; } .nav .current .show { z-index: 10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display: block; float: left; background: transparent; padding: 0px 10px 0px 10px; margin: 0px; white-space: nowrap; border: 0px; color: #414142; } .nav .current .sub li.sub_show a { color: #414142; cursor: default; background: url(menus/back_1.gif); } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility: visible; color: #1b75bc; background: url(menus/back_1.gif); } h1,h2,h3,h4,h5,h6 { font-family: arial, verdana, sans serif; color: #1b75bc; text-align: left; } p { font: bold 14px arial, verdana, sans serif; color: #414142; text-align: left; } #body { float: left; width: 900px; background-color: #ffffff; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; } #text { width: 550px; height: 900px; margin: 25px 0px 0px 50px; border-style: solid; border-color: #1a1a1a; float: left; } #side { width: 200px; height: 900px; margin: 25px 0px 0px 10px; float: left; border-style: solid; border-color: #1a1a1a; } p.links { text-align: center; font: 13px arial, verdana, sans serif; } #footer { position: relative; text-align: center; vertical-align: center; width: 900px; height: 110px; background-color: #fff; margin: 5px auto 10px auto; border: 1px solid #414141; clear: both; } .clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } I cleaned a lot of your CSS. Good Luck, if you need something just call over. Have to go to work :S. Regards
August 27, 200917 yr Author Oh my god! What a legend... Thanks so much for all your help! I hope you didn't spend too long doing it. few quick questions though if thats ok... Just the same way as you've set the Body DIV to "auto height", how could i set the #text and #side DIV's to resize automatically within this Body DIV too? I want the #text and #side DIV's to have "auto height" and not a predetermined height set to 900px. I can't get text-align: center; to centrally align the body DIV... as a quick fix i have used 'margin-left: 53px;' which works fine in Firefox, but IE shifts it a few pixels right? do you know of an alternative that would center the body DIV across all browsers? Kind regards,
August 27, 200917 yr Hey, No problem matte , I'm glad to help . Later I will try to center that my friend, I'm just a little busy with a project, as soon as possible I will try to help you. Today you will have that centered. Regards
August 27, 200917 yr You may need to use margin-left: auto; margin-right: auto; put that in the css under the element you need to center and it should work.
September 1, 200916 yr Author Hi, yeh i have tried that and it still won't center it. Still trying to figure out how i can get the 'text' DIV to have 'auto height'
September 1, 200916 yr Hi friend, Try this code . CSS: * { margin: 0px; padding: 0px; } body { font-family: "arial", verdana, sans serif; background-color: #ccc; overflow: auto; border: 0px; } #global { margin: 0px auto; text-align: center; min-width: 770px; width: 902px; } #header { height: 100px; width: 900px; border: 1px solid #414142; background: #fff url("slogan.gif") no-repeat scroll center right; } img.displayed { display: block; text-align: left; margin: 6px auto 0px 15px; } .nav { height: 35px; background: url(dropline_0.gif) repeat-x; position: relative; font: bold 12px arial, verdana, sans-serif; width: 900px; border-left-style: solid; border-right-style: solid; border-color: #414142; border-width: 1px; margin-top: -1px; margin-bottom: -1px; z-index: 500; } .nav .table { display: table; margin: 0 auto; } .nav .select, .nav .current { margin: 0px; padding: 0px; list-style: none; display: table-cell; white-space: nowrap; } .nav li { margin: 0px; padding: 0px; height: auto; float: left; } .nav .select a { display: block; height: 35px; float: left; background: url(dropline_0.gif); padding: 0px 30px 0px 30px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #fff; } .nav .current a { display: block; height: 35px; float: left; background: url(dropline_2.gif); padding: 0 0 0 15px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #ffffff; } .nav .current a b { display: block; padding: 0px 30px 0px 15px; background: url(dropline_2.gif) right top; } .nav .select a:hover, .nav .select li:hover a { background: url(dropline_1.gif); padding: 0px 0px 0px 15px; cursor: pointer; color: #fff; } .nav .select a:hover b, .nav .select li:hover a b { display: block; float: left; padding: 0 30px 0 15px; background: url(dropline_1.gif) right top; cursor: pointer; } .nav .select_sub { display: none; } .nav table { border-collapse: collapse; margin: -1px; font-size: 1em; width: 0px; height: 0px; } .nav .sub { display: table; margin: 0px auto; padding: 0px; list-style: none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background: transparent; color: #f00; } .nav .select :hover .select_sub, .nav .current .show { display: block; position: absolute; width: 900px; top: 35px; background: url(back_0.gif); padding: 0px; z-index: 100; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; left : -1px; right : 0px; text-align : center; } .nav .current .show { z-index: 10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display: block; float: left; background: transparent; padding: 0px 10px 0px 10px; margin: 0px; white-space: nowrap; border: 0px; color: #414142; } .nav .current .sub li.sub_show a { color: #414142; cursor: default; background: url(menus/back_1.gif); } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility: visible; color: #1b75bc; background: url(menus/back_1.gif); } h1,h2,h3,h4,h5,h6 { font-family: arial, verdana, sans serif; color: #1b75bc; text-align: left; } p { font: bold 14px arial, verdana, sans serif; color: #414142; text-align: left; } #body { float: left; width: 900px; background-color: #ffffff; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; } #text { width: 550px; height: 900px; margin: 25px 0px 0px 50px; border-style: solid; border-color: #1a1a1a; float: left; } #side { width: 200px; height: 900px; margin: 25px 0px 0px 10px; float: left; border-style: solid; border-color: #1a1a1a; } p.links { text-align: center; font: 13px arial, verdana, sans serif; } #footer { position: relative; text-align: center; vertical-align: center; width: 900px; height: 110px; background-color: #fff; margin-top: 5px; margin-bottom: 10px; border: 1px solid #414141; clear: both; } .clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Worklinx - The self-employed workforce</title> <link rel="stylesheet" media="all" type="text/css" href="style.css"><!--[if IE]> <link rel="stylesheet" media="all" type="text/css" href="style_ie.css" /> <![endif]--> </head> <body> <div id="global"> <div id="header"> <img class="displayed" src="newlogo2.gif" alt="worklinx" /> </div> <div class="nav"> <div class="table"> <ul class="select"> <li> <a href="#nogo"><b>Home</b></a> </li> </ul> <ul class="select"> <li> <a href="#"><b>About Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Our Goal </a></li> <li><a href="#nogo">Our Values </a></li> <li><a href="#nogo">Why Use Worklinx </a></li> <li><a href="#nogo">Partners </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Services</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub show"> <ul class="sub"> <li><a href="#nogo">Construction </a></li> <li><a href="#nogo">Installation </a></li> <li><a href="#nogo">Maintenance </a></li> <li><a href="#nogo">Repairs </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Sub-contractors</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">About our sub-contractors </a></li> <li><a href="#nogo">Working for Worklinx </a></li> <li><a href="#nogo">The Application Process </a></li> <li><a href="#nogo">Join Us </a></li> <li><a href="#nogo">FAQ </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Contact Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Request a Sub-contractor Application Pack </a></li> <li><a href="nogo">Request a call back </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <div id="body"> <br /> <br /> <br /> <div id="text"> <h2>Welcome to Worklinx</h2> <p>Welcome to Worklinx - the UK's only construction, installation, maintenance and repair company powered solely by a vetted workforce of self-employed sub-contractors and tradesmen.</p> </div> <div id="side"> <p>side boxes</p> </div> </div> <div id="footer"> <p class="links"> <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="ourservices.html">Our Services</a> | <a href="oursubcontractors.html">Our Sub-contractors</a> | <a href="contactus.html">Contact Us</a> <br /> <br /> <a href="sitemap.html">Sitemap</a> | <a href="contactus.html">Contact Us</a> | <a href="legal.html">Legal</a> | <a href="privacy.html">Privacy</a> <br /> <br /> Copyright © 2007-2009 Worklinx. All rights reserved </p> </div> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Worklinx.co.uk presents valid HTML 4.01 Transitional" height="31px" width="88px" border="0" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0px; width:88px; height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Worklinx.co.uk presents valid CSS" /> </a> </div> </body> </html> Regards
September 3, 200916 yr Author Hi, thanks for your reply but the body DIV will still not align in the center (please see attachment)
September 3, 200916 yr Hi dt24 its about "float : left;" on the first line of #body in CSS float: left; for fix change to margin: 0 auto;
September 4, 200916 yr Hi, Did you try the example I have passed you? for me worked fine . Make a new document and try it. Regards
September 8, 200916 yr Author Hi, i think i've figured it out, the width of the #Global has to be the same width as the Header, Body & Footer DIV's! Thanks for the help!
September 11, 200916 yr When using float: left or right in Child divs, make sure to add position: relative to them. And add overflow: hidden in their Parent div. The Parent div will inherit the height of his Child divs. The code below will show you want I mean. <style type="text/css"> .body { background-color: #000; height: auto; position: relative; overflow: hidden; width: 500px; } .left { background-color: #00F; float: left; height: 400px; position: relative; width: 200px; } .right { background-color: #F00; float: right; height: 600px; position: relative; width: 300px; } </style> <div class="body"> <div class="left"></div> <div class="right"></div> </div>
September 23, 200916 yr Author Thanks for that post above John Michael Sales, I thought i had the auto:height issue solved a few weeks back but i had just started inputting my HTML content and what happens.. the page does not resize to fit all of the content in! First thing i did was copy and paste your reccommendation for overflow: hidden; and its just re-sized all of my pages. Perfect! Thanks again!
Create an account or sign in to comment