How to grow a div horizontally by its content?

css html expand autogrow
Ecir Hana picture Ecir Hana · Jan 30, 2009 · Viewed 18.1k times · Source

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>

Answer

Crescent Fresh picture Crescent Fresh · Jan 30, 2009

That is indeed bizarre. Try floating the outer:

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

Related questions

Parent div not expanding to children's height

As you will see, I have a div (#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapper also does act visually as a semi-transparent border in the layout. My problem is that #innerPageWrapper won't expand to fit the …

Read More
How to expand a div and its contents on hover?

I'm trying to create a div that expands on hover, but cannot figure out how to make the content expand with the div. I've tried a few overflow options, but they didn't work. Here is the JSFiddle

Read More
Click header and expand text without using JavaScript / jQuery

As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there …

Read More