ansaurus

Question

Answer 1

A:

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.

Hexagon Theory 2009-01-30 00:57:05

Answer 2

A:

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.

yjerem 2009-01-30 00:57:09

Answer 3

A:

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

2009-01-30 00:59:20

Answer 4

+2 A:

That is indeed bizarre. Try floating the outer:

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

Crescent Fresh 2009-01-30 01:03:57

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 2009-01-30 01:09:12

Well.. never mind. auto doesn't work.

Brian Kim 2009-01-30 01:12:43

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 2009-01-30 01:26:08

Answer 5

A:

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>

Brian Kim 2009-01-30 01:05:19

Nope, doesn't work.

Crescent Fresh 2009-01-30 01:10:44

Answer 6

A:

This works great (note "display: table-cell"):

<?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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head />
<body>
<div style="background-color: #f00; display: table-cell;">
<div style="width: 2000px; height: 100px; " />
</div>
</body>
</html>

I'm just wondering why is this happening and whether there is another solution?

Brian Kim: This doesn't work, it's stops at the right edge of the screen

crescentfresh: Thanks! This works!!

2009-01-30 01:10:06

I don't think this works for IE.

Brian Kim 2009-01-30 01:15:33

Hmm. It doesn't work in my IE7... That's odd.

Brian Kim 2009-01-30 01:20:50

@Brian: with the specified doctype too?

Crescent Fresh 2009-01-30 01:55:54

ansaurus

tags:

views:

answers:

How to grow a div by its content?

related questions