Css Container Div Size

Question

I'm having an issue getting a DIV to resize to fit the content when it forces its child divs to move down.

What I'm trying to do in the sample is have the container div's width to that of the children so that I can have the container centered on the page.

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

body {
    text-align: center;
}
#container {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    padding:0;
    margin:0;
    /* for ie6/7: */
    *display: inline;
}
.box{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    display:inline-block;
}

When you look at the example the container is expanding to 100% while leaving space between right most child and the container. Div Issue Example http://jsfiddle.net/rjY7F/594/

You can add either a max-width or a width: % to the container. — chrisbedoya, Feb 03 '15 at 16:46
The problem with that is I need the div to be able to respond to the page size. — RoboDev, Feb 03 '15 at 16:48
possible duplicate of [Center grid of inline-block elements in div, but last row is aligned with left edge of grid](http://stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements-in-div-but-last-row-is-aligned-with-left-e) — RoboDev, Feb 03 '15 at 18:58

score 1 · Answer 1 · answered Feb 03 '15 at 16:47

1

#container {display:table;}
.box {display:table-cell; float:none; vertical-align:top;}

Then set the width of the .box style to something like 100px, and set the width of #container to the combined width.

answered Feb 03 '15 at 16:47

Jim Leeder

126
11

This almost works. The float:none is causing everything to stay on the same row instead of moving down into the next row. Removing the float none cause it to have to same problem it had before. – RoboDev Feb 03 '15 at 16:57
What more is needed then? – Jim Leeder Feb 03 '15 at 16:59
I need the items to be able to move to the next row of different monitors. When ever the are more items on the first row that will fit and it wraps the items down it's leaving the white space between the right side of the top most row and the div. – RoboDev Feb 03 '15 at 17:05
Put margin:0px; on the images. To wrap the images, set a specific width smaller than the combined width of the images. – Jim Leeder Feb 03 '15 at 17:08

score 1 · Answer 2 · answered Feb 03 '15 at 17:00

I would use display table on the container, add a width 100% to keep the layout size. Use display table-cell on the box,

here is the code :

#container {
text-align: left;
border: 1px solid red;
display: table;
padding:0;
margin:0;
width:100%;
}
.box {
display:table-cell;
height:100px;
border:1px solid blue;
}

http://jsfiddle.net/rjY7F/603/

score 1 · Answer 3 · answered Feb 03 '15 at 17:09

Flexbox can be helpful in this scenario

To make a flexbox environment you must start by setting the parent element (in your case container) to display:flex.

For the flex-items you can just set the min-width but I suggest you also look into all the awesome features flexbox offers...

Css Container Div Size

3 Answers3