Hello friends,
In my website am trying to set my body height as auto. But whenever I try to set auto for height it does not show any color or image that i have put for body section. Well for internet explorer it shows fine but for Firefox and chrome i am encountring same problem. If i define a certain height like height:700px; then it shows fine but the height is fix i want it auto as the content move on. Here is the code . Please find a solution :(
website : www.ancestortravels.com
For now i had fix a certain height for this site as height:700px;


<!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">
<title>test for ancestor body </title>
<link href="pinsite.css" type="text/css" rel="stylesheet" />


<div id="wholebody">

<!--left section --> <div class="lef">
This is a test page..

<!-- right section --> <div class="rig">
<?php include_once 'homeright.php';  ?>


CSS code

#wholebody{ background:url(images/wholebody.gif) #f5f6f0 repeat-y top center; margin-left:1px; width:1024px; height:auto; }

.lef{width:780px; float:left;}
.rig{width:243px; float:right;}

Here i see that if i remove float then the height is fixed as auto works fine. but i need to float as right hand side is a bottons tab. Any help will be heartly appriciated..

Since body height is automatically determined by the height of the browser window, you don't need that style - unless for body you're referring to the 'wholebody' div.
In that case, clear the left and right divs inside the 'wholebody' div and it should work just fine.

<div style="clear:both"></div>

What's happening - with the floats not cleared, then the wholebody container is defaulting to a 0 height in Firefox.

Thank you so much. It works fine at all now. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.