CODEWITHSUNDEEP
css
xong
xong

Reputation: 350

Parent element's width depending on floating children

I have an indefinite number of boxes. These boxes shall have a constant border of 3px inside and outside. As you can imagine the simple solution of giving every box that border of 3px results in inner borders with a width of 6px.

So i wrapped a parent div around these boxes and let the parent float, too. Now the boxes get a bottom and a right border and the parent gets a top and a left border. This works really good except for the case when there are so many boxes so they start to show up in a new line.

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="first" class="box"></div>
        <div id="second" class="box"></div>
        <div id="third" class="box"></div>
    </div>
</div>

The #wrapper exists only to simulate a small browser window and to illustrate the problem.

#wrapper {
    width:500px;
    border:1px solid #000;
    padding:20px;
    overflow:hidden;
}

#inner-wrapper {
    float:left;
    border-top:3px solid #00a;
    border-left:3px solid #00a;
}

.box {
    width:198px;
    height:198px;
    border-bottom:3px solid #00a;
    border-right:3px solid #00a;
    float:left;
}

You can also see this code example at http://jsfiddle.net/nTTnd/.

The top border of the parent div is what troubles me. If you hide the third child div the parent gets the width of the remaining two boxes and everything is fine. If the third child is displayed the top border of the parent just takes all the width it can get.

If anyone has a suggestions how to solve this or even a complete different approach I would be very happy. =)

Upvotes: 1

Views: 188

Answers (3)

Ryan Byrd
Ryan Byrd

Reputation: 1

You might consider looping through the child elements and making a sum of their offsetWidth().

    $(document).ready(function()
    {
       totalWidth=0;
        $(".box").each(function(){  /*select the child boxes*/
            totalWidth=totalWidth + $(this).offsetWidth();  /* sum their width  */
            totalWidth= totalWidth + 8; /*being lazy here when compensating for padding and margin.*/
        })
        $("#inner-wrapper").width(totalWidth);  /*set the parent wrappers width. */
        $('#wrapper').before($('<button>').text('Toggle 3rd <div>').click(function()
        {
            $('#third').toggle();
        }))
    });

Upvotes: 0

Aayushi Jain
Aayushi Jain

Reputation: 2879

Do you want something like this: JSFiddle

I just add border:3px solid #00a; in .box and remove the other borders.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128836

Just use negative margins to fix the border issue.

First remove the border-top and border-left from #inner-wrapper, then change the .box styling to use:

border:3px solid #00a;
margin-left:-3px;
margin-bottom:-3px;

JSFiddle demo.

Upvotes: 3

Related Questions