I have an HTML page that for the sake of this question looks like this:

```
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>

```

Note the "very long line", and the background color of that div.

My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.

Basically I want my div to behave like this:

1. To have the specified background color
2. To minimum have the same width as the screen, even if the text within is just a few words
3. To follow the width of the text, if it is more than the width of the screen
4. Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?

Did that make any sense?

Is there any way to do this?

---

I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: <http://www.vkarlsen.no/test/test.html>

I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:

* [iPad background for div blocks not spanning entire width of screen](https://stackoverflow.com/questions/5708203/ipad-background-for-div-blocks-not-spanning-entire-width-of-screen)

Tried the suggested `<meta ... viewport .../>` tag, did not make a difference (it is present in the test page right now.)
* [Background color stretches accross entire width of ul](https://stackoverflow.com/questions/112093/background-color-stretches-accross-entire-width-of-ul)

`<div>`s are already block elements
* [WebKit doesn't paint background-color for entire width of final inline list item](https://stackoverflow.com/questions/2141268/webkit-doesnt-paint-background-color-for-entire-width-of-final-inline-list-item)

Tried setting the div to `display: inline-block;` but this did not appear to change anything