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;


Html

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

</head>

<body>
<div id="wholebody">

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

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

</body>
</html>

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..

Recommended Answers

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.


       
Jump to Post

All 2 Replies

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>
<div style="clear:both"></div>
</div>
</body>
</html>

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 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.