Member Avatar for Aeonix

Example.

I have parent div of 1000px width. I have 4 children divs that each have been told to have "some size" (for example 300px). I would like to put 3 children in first row and then put the fourth in the second row below the 1st child. Something like flex-wrap: wrap; with flexbox, two scenartio's here:

  • I cannot use actual flexbox (since it would stretch 4th child to 1000px width) and IE9 needs to be supported... because people wish so... and JavaScript needs to be assumed as turned off.
  • Situation as above, but JavaScript is turned on.
  • 2 Contributors
  • 2 Replies
  • 226 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mblan180131

Dani AI

Generated

Nice catch, — switching the child boxes into an inline formatting context fixed the wrapping behavior and is the simplest, pragmatic solution for the IE9 / no-JS scenario. A few practical tips that often bite people after that change:

Whitespace and baseline gaps

  • Literal spaces/newlines between inline elements add a small gap and can push a row over the container width. Two common fixes are to remove the whitespace in markup or zero the parent font-size and restore it on the children:
/* remove inline whitespace gap */
.container { font-size: 0; }

/* restore fonts and avoid baseline offset; keep padding inside width */
.container > * { font-size: 16px; vertical-align: top; box-sizing: border-box; }

Box sizing, padding and rounding

  • Borders or padding increase the effective width unless you use a box model that includes them. Also watch sub-pixel rounding: several 300px items plus tiny gaps can overflow 1000px in some browsers. Use box-sizing: border-box and double-check combined widths + margins.

Float fallback and explicit clearing (IE9-friendly)

  • If you prefer floats instead of inline formatting, explicitly clear the fourth item so it drops below the first:
.child { float: left; width: 300px; box-sizing: border-box; }
.child:nth-child(4) { clear: left; }

Progressive enhancement when JS is available

  • When JavaScript is allowed, detect modern layout support and enhance to a flex/grid layout for capable browsers while keeping the inline/float fallback for older ones. Test with borders, padding and different font sizes — subtle layout shifts are usually due to whitespace, box model or rounding. And yes, , solving your own problem is always a win.
Member Avatar for Aeonix
OH

It's inline-block for children. I somehow manage not to save file, that's why it didn't work.

Member Avatar for mblan180131

i see. solving your own problems. YOU, sir, are going to be lethal in your life.

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.