How to grow a div horizontally by its content?

Question

please, can someone explain to me, why the red div isn't expanding to the right? It stops where the screen ends. What do I have to do, to make it expand?

One thing that works is to "display: table-cell" the red div but I was wondering if there's another way and why this happens...?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>
</body>
</html>

Good discovery. This is very odd. I'd like to see if anyone comes up with a solution without using table-cell or float. — Brian Kim, Jan 30 '09 at 01:30
@nailitdown I hope it's just a joke. I hate non-XML-serialised HTML. Personal opinion… :-p — Constantino Tsarouhas, Feb 25 '12 at 01:30

score 3 · Answer 1 · answered Jan 30 '09 at 01:03

3

That is indeed bizarre. Try floating the outer:

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>

answered Jan 30 '09 at 01:03

Crescent Fresh

115,249
25
154
140

I think floating should only be used to... well actually to float something. Overusing float can become a big mess. Setting width to auto should work. – Brian Kim Jan 30 '09 at 01:09
While I personally don't think floating is the only solution here, this works best across all browsers and table-cell doesn't. Down-vote removed. =) – Brian Kim Jan 30 '09 at 01:26

score 2 · Answer 2 · answered Jan 30 '09 at 00:57

The div that it's contained in is smaller than 2000px. You need to do something like this:

  <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

Of course, now the inner div's width doesn't need to be specified unless it is different than the outer div's.

score 2 · Answer 3 · edited Aug 14 '12 at 22:51

2

Put overflow: auto; in the parent <div>'s style.

edited Aug 14 '12 at 22:51

Roddy of the Frozen Peas

14,380
9
49
99

answered Mar 16 '11 at 02:43

Bari

21
1

Prasanth K C · Answer 4 · 2013-11-14T09:19:54.583

1

Check with this one. it will expand the container as the text goes on...

    <div style="background-color: #f00; height: 100px; display: inline-block;">
      <div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
        here is some content
      </div>
    </div>

edited Nov 14 '13 at 09:19

answered Dec 17 '11 at 05:13

Prasanth K C

7,073
5
39
62

score 1 · Answer 5 · edited May 23 '17 at 12:13

  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

Closing a DIV tag like that (i.e. a self-closing tag) will cause trouble.

It may be legal (See this SO Thread) but in my experience it often causes strange behavior.

However, that is not the problem. The following code works in Chrome and IE9.

  <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>

Display: inline-block; tells the element to grow as much (or as little) as necessary.

Fiddle: http://jsfiddle.net/sArvr/

This does seem like counter-intuitive behavior.

score 0 · Answer 6 · answered Jan 30 '09 at 00:57

Depending on what you're using this for, I'm assuming the div element is going to be the main focus of the page; if this is the case, you can take that width: 2000px; line and just apply it to the body instead of directly to the block-level element you want to stretch:

<style>
body
 {
width: 2000px;
 }
</style>

If this method doesn't work for you for whatever reason, creating a transparent pixel image and giving it the width you require should work just as well.

score 0 · Answer 7 · answered Jan 30 '09 at 00:59

0

The width of the inner div can change, I need to grow the outer one so I can't assign a width to it.

answered Jan 30 '09 at 00:59

score 0 · Answer 8 · edited May 23 '17 at 12:30

It seems like max width of parent div is limited by browser screen width even though child div's width grows beyond browser screen width. This is an odd discovery...

I suggest using float on parent div. (ref: crescentfresh) I know for sure that table-cell does not work for IE6. And a quick test on IE7 on my machine doesn't work either although it should...

This should work. (EDIT: This doesn't work...)

<div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>

score 0 · Answer 9 · answered Jan 12 '12 at 11:48

0

put <div style="min-height: 100px; " />

when you grow the content more, our div should grow its size automatically.

answered Jan 12 '12 at 11:48

Selvin

12,333
17
59
80

How to grow a div horizontally by its content?

9 Answers9