Member Avatar for rajeesh_rsn

Hai,

I had a main div and two child divs inside that .. I need to arrange as follows ..

-------------------------------------------------
| | |
| child div 1 | child div 2 |
| | |
| | |
-------------------------------------------------

the height of the child div is dynamic. I had the code .. but didn't working in FF and opera... works fine only in IE...

my code

<div align="left" style="width:800px;height:auto;clear:both;background-color:#FFFFFF;">
<div style="width:100px;height:100px;background-color:#990000;float:left;"></div>
<div style="width:100px;height:200px;background-color:#0000FF;float:left;"></div>
</div>

Anyone please help to fix this problem

Thanks in Advance
Rajeesh

  • 3 Contributors
  • 3 Replies
  • 874 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Parveenkumar

Dani AI

Generated

This is the classic "floats escape the normal flow" problem: the two child divs are floated, so the parent does not grow to contain them in some browsers. saw it in Firefox/Opera while older IE behavior made it look different. 's approach to make the parent establish a new block-formatting context fixed the symptom, but there are a few safer, more flexible options worth knowing.

A robust, cross-browser clearing technique is the clearfix pseudo-element. Add the class to the parent and it will contain floated children without clipping overflow:

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

For new layouts, replace floats with modern layout tools. Switching the parent to a flex or grid container removes the need to clear floats and is easier to control:

.container {
  display: flex;
  gap: 16px; /* optional spacing */
}

Troubleshooting checklist if the parent still looks collapsed:

  • Inspect computed heights in developer tools to confirm the parent has zero height.
  • Check for absolutely positioned children (they do not affect parent height).
  • Ensure no stray inline height or positioning is forcing collapse.
  • Confirm the page uses a standards doctype (quirks mode can change layout behavior).
  • If you must support very old IE, triggering "hasLayout" (for example with zoom:1) was historically used, but prefer modern fixes where possible.

Because 's suggestion solved the original post, use that as a quick fix; for maintainable code and new designs prefer clearfix or a flex/grid layout. 's follow-up confirms the simple fix worked for this thread.

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Put this css property in the main div.

overflow: hidden

Float overlap to its parent and element followed after it. You can add the clear div after the two float divs. Here is example

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

Good luck..

Member Avatar for rajeesh_rsn

Thanks

The problem solved
Thank you very much

Put this css property in the main div.

overflow: hidden

Float overlap to its parent and element followed after it. You can add the clear div after the two float divs. Here is example

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

Good luck..

Member Avatar for Parveenkumar

thanks....

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.