Is there a way to make a div adjust its width based on the width of its children, even if the children are too wide and collapse? Here is my CSS code:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML structure:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is the link to my jsfiddle for reference: http://jsfiddle.net/vullnetyy/pshao68g/
My objectives are as follows:
- The red div should match the width of the three blue divs in its first row.
- The red div should be centered within the green div.
- Avoid the use of JavaScript.
- Avoid setting static widths for the red or green divs so that they can be responsive and accommodate any number of blue divs provided.