Member Avatar for Rajicet

Hi,
In IE, two rows and two columns in each row are coming correctly. But in firfox, it is coming as 3 columns in first row and 1 column in second row. The code is given below.Any solution for this problem ? please help.

<div style="width:60%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row1 column1</div>
<div align="left" style="float: left;width:30%;">row1 column2</div>
</div>
</div>
<div style="width:80%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row2 column1</div>
<div align="left" style="float: left;width:30%;">row2 column2</div>
</div>
</div>

  • 2 Contributors
  • 2 Replies
  • 121 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Rajicet

Dani AI

Generated

Firefox is letting the later boxes float up beside the earlier ones because those floats are not being contained in their own layout context. was right to flag the deprecated attributes, and ’s clearing idea points in the right direction. A more robust solution is either to explicitly contain each row (so floats can not escape) or to stop using floats for layout and use Flexbox or Grid instead.

A minimal Flexbox approach (no floats) — two equal columns per row:

.row {
  display: flex;
  gap: 16px;
}
.col {
  flex: 0 0 50%;
}

Or use CSS Grid when you want predictable rows and columns:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

Quick troubleshooting tips if you must keep floats:

  • Inspect computed box sizes in the browser devtools to see whether percentages, padding or margins push widths over the available space.
  • Make each row establish a block formatting context (for example with display: flow-root or overflow: auto) so child floats cannot rise into previous siblings.
  • Validate your markup and DOCTYPE — quirks mode can change float behavior.

Further reading: MDN on how floats work and how to use modern layout systems — see “float” and Flexbox/Grid documentation on MDN for details (for example: https://developer.mozilla.org/en-US/docs/Web/CSS/float and https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).

Recommended Answers

All 2 Replies

Member Avatar for gunnarflax

Align on div is deprecated and should not be used. Instead use: style="float: ..."

If you can't get it to show correctly after changing align then just use float:left on the left column and float:right on the right column. It can also be a problem with the width of the div's according to the container. Try adding a px or two :)

Member Avatar for Rajicet

For the second row, we can use Clear property.

<div style="width:60%;clear:both" align="left">
<div>
<div align="left" style="float: left;width:30%;">row1 column1</div>
<div align="left" style="float: left;width:30%;">row1 column2</div>
</div>
</div>
<div style="width:80%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row2 column1</div>
<div align="left" style="float: left;width:30%;">row2 column2</div>
</div>
</div>

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.