Member Avatar for rubik's cube

We are trying to create a new design for our non profit site and are having trouble with getting the content portion of our css div to expand appropriately in Firefox or Safari. Works fine in IE though. Can someone take a peek and make a recommendation?

Site is at: and the css is at


Any help / suggestion would be greatly appreciated.

Rubik's Cube

  • 2 Contributors
  • 2 Replies
  • 127 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

Classic float-containment problem. The content area is collapsing because its column children are taken out of normal flow; older IE versions sometimes hid this by triggering an internal layout quirk, which is why it looked fine there. was on the right track pointing at float/clear issues and DOM ordering — the root cause is that the parent isn’t containing floated children.

Three practical fixes (choose one):

/* modern, reliable clearfix */
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}
/* quick and dirty: create a block formatting context */
.wrapper {
  overflow: auto;   /* or overflow: hidden if clipping is acceptable */
}
/* simplest when supported */
.wrapper {
  display: flow-root;
}

Troubleshooting checklist:

  • Use the browser inspector to select the parent and check computed height; if it shows zero while children are visible, floats are the issue.
  • Temporarily give the parent a background/border to see its box.
  • Search the CSS for any fixed height: on the wrapper/content — remove it unless intentional.
  • If you used the negative-margin column technique (as suggested earlier), test with different font sizes and window widths; that layout can be brittle with text resizing.

Caveats and notes:

  • overflow: hidden can clip positioned children or drop-downs.
  • display: flow-root is the cleanest modern solution; use clearfix for wider compatibility.
  • For Firefox text-resize concerns, prefer relative font units (em/rem) over px.

Good references: Clearfix — CSS-Tricks and MDN: float.

Recommended Answers

All 2 Replies

Member Avatar for autocrat

At a look... I'd guess either you have used "height:" or are using "float:" and not clearing it.

Member Avatar for autocrat

Hmmm, you also haev a big issue with resizing text in MozFF.


Okay... as it stands you have a Container.
Inside the Container, you have 2 independant Columns, (meaing they are not nested).

As they are not nested they have no relation to each other (so no matter the size of the Left, the right will not stretch, and vice versa).


Instead... you either want to re-order things a little...

<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>

#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}

#contents
{
margin-left: 200px;
}

#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}


All of this means that basically, you hae a parent block... containg a child and grandchild.
The child is pushed from the left exactly the same distance as the width of the grandchild.
the grandchild is then pulled to the left, almost completely leaving the child, bar 1px.

You use the float: on both Parent and Grandchild interact.
(NOTE: You may want to apply Float to the Parent as well (so you float container, content and leftcol).

Also, helps if you test in other browsers as build!
Further, you may want to validate it ( though I am impressed with the coding standard and the CSS!).

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.