Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extend a div width based on its children width

Here is my little problem (the value are just here for the example):

Lets say I have a window with a width around 500px. Inside my document, I have an outer div with no specified width, but the following css:

.outer{
  white-space:nowrap;
  background:blue;
}

Inside this div are 3 other div that have the following properties:

.t1{
  display:inline-block;
  width:400px;
}

(notice the width of 400px. That's where the problem is, the line is wider than the window, and the outer div does not extend. The HTML looks like that:

<div class="outer">
    <div class="t1">1</div>
    <div class="t1">2</div>
    <div class="t1">3</div>
</div>

What I'm trying to achieve is to have the 3 inner div with a blue background, without setting it for the t1 class. What this example will produce is a blue background limited to the width of the window.

See full example here : http://jsfiddle.net/sjCTR/ (you'll have to adapt the bottom left corner if your screen is to large)

I'm wondering if somehow that could be achieved thru css/html only, without setting the outer div width/the inner div background?

like image 853
Py. Avatar asked Apr 08 '12 23:04

Py.


People also ask

How do I make a div the same size as a child?

Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.

How do you make div width expand with its content using CSS?

Using inline-block property: Use display: inline-block property to set a div size according to its content.


1 Answers

Add float: left or display: inline-block to .outer.

like image 120
thirtydot Avatar answered Oct 11 '22 17:10

thirtydot