Member Avatar for brainfo

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

  • 2 Contributors
  • 2 Replies
  • 109 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by brainfo

Dani AI

Generated

This is the classic collapsed-parent issue: floated children are taken out of normal flow so the parent container can end up with zero height in Firefox/Chrome (older IE behaved differently). is right to point out clearing — that immediate fix works. A few cleaner, more robust options you can use instead of an empty clearing element follow.

Use a clearfix pseudo-element (keeps markup clean):

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Apply a new class to the parent (or add the rules to your container). See the clearfix pattern for details: CSS-Tricks clearfix.

Create a new block formatting context with overflow (simple but watch for scrollbars/clipping):

#wholebody {
  overflow: auto; /* or overflow: hidden if clipping is acceptable */
}

A modern option is display: flow-root which makes the element contain its floats without extra markup:

#wholebody {
  display: flow-root;
}

display: flow-root is supported in modern browsers — reference: .

Extra tips: prefer min-height over a fixed height so the container grows with content (or use min-height:100vh if you need the area to at least fill the viewport). If the background must span the whole page, consider applying it to body instead of the inner wrapper. For debugging, temporarily add a border or background to the parent in DevTools to see whether it’s collapsing, and check for absolutely positioned children (those also escape normal flow).

As confirmed, clearing the floats fixes the immediate problem; for maintainability pick the clearfix or flow-root approach.

Recommended Answers

All 2 Replies

Member Avatar for Dandello

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.

Edited by Dandello because: n/a
Member Avatar for brainfo

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.