Home/ Questions/Q 8624583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T07:33:55+00:00

How do I wrap the floating divs of unknown sizes (children) with a border

  • 0

How do I wrap the floating divs of unknown sizes (children) with a border (parent), while keeping the children in the same line.

The problem is that unless the parent div is set to width: 100%;, children tend to collapse one beneath the other.

enter image description here

UPDATE: While posting code, I figured it out, see jsfiddle.

My code had extra <div> wrappers around children. I either had to remove them or set them to display: inline;.

<div class="body">
    <div class="parent">
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
        <div>
            <div class="child"></div>
        </div>
    </div>
</div>​

Thanks for other great tips!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you don’t change the children divs to display: inline or display: inline-block, they will be vertically stacked. If the children are floated , their size will not push the boundaries of the parent. If you use display: inline or display: inline-block, the children will be inline as long as the parent can be wide enough to fit them all and they will stretch the parent.

    Fiddle: http://jsfiddle.net/MPCsD/1/

    • 0