CODEWITHSUNDEEP
htmlcss
vullnetyy
vullnetyy

Reputation: 1701

How do I set the width of a DIV to match its content

How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.

I have this CSS:

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

<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 my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/

What I want to do here is:

  1. the red div must be exactly as wide as the 3 blue divs in its first row
  2. the red div must be centered within the green div
  3. javascript must be avoided
  4. no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)

Upvotes: 0

Views: 61

Answers (2)

ohadsas
ohadsas

Reputation: 479

First of all, if you want to center an Element you need to make it:

display: block;
width : %/px;
margin-left: auto;
margin-right:auto;

If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.

such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/

Upvotes: 1

Nathan Kellert
Nathan Kellert

Reputation: 618

Theres two conflicting issues here.

1)You must have a set width in order to do margin-left/right auto.

2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.

In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!

try this for to your inner and see what happens.

.inner{
        width: 250px;
        margin: 0 auto;
        background-color: red;
    }

Upvotes: 0

Related Questions