CODEWITHSUNDEEP
htmlcss
RoboDev
RoboDev

Reputation: 4156

Css Container Div Size

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/

Upvotes: 0

Views: 83

Answers (3)

maioman
maioman

Reputation: 18744

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...

Upvotes: 1

Mathieu Ho Thanh
Mathieu Ho Thanh

Reputation: 31

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/

Upvotes: 1

Jim Leeder
Jim Leeder

Reputation: 136

#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.

Upvotes: 1

Related Questions