How to style a div to have a background color for the entire width of the content, and not just for the width of the display?

Question

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:

To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
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

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

<div>s are already block elements
WebKit doesn't 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

I tried (just now, after seeing your comment) to replace "width: 100%" with "min-width: 100%", was that correct? It did not appear to change anything. — Lasse V. Karlsen, Jan 02 '12 at 20:04
The issue here is not with the width of the element itself, that's being rendered correctly. It's with the `white-space: nowrap;` property that is default to the `nobr` tag. If you apply the same property to a different tag the same behavior will occur. I'm not sure why this is but it's a start. — Ansel Santosa, Jan 02 '12 at 20:10
This should answer your followup question: http://jsfiddle.net/FmCbg/4/ — Ansel Santosa, Jan 02 '12 at 20:29
Actually, that solved *all* my questions. I wrapped the entire page in a div, and changed my divs to spans, and did the css changes you had, and now things looks like I want. Care to post your suggestion as an answer? If so, please copy the contents of the fiddle into your answer. — Lasse V. Karlsen, Jan 02 '12 at 20:40

score 14 · Accepted Answer · answered Jan 08 '12 at 03:46

14

black magic:

<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>

If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.

answered Jan 08 '12 at 03:46

user372719

172
3

Pretty amazing, to say the least. Not sure why, but floating the `body` allows it to adapt to the width of the `div`. By default, I think `body`'s width resets to the browser viewpoints width, but floating it makes it behave like it would have `width: auto`; Worked in FF and Webkit, didn't have a chance to test IE or Opera. – kontur Jan 16 '12 at 14:29
Excellent! I was trying to make the div bg on a transparent body bg in android and it worked! – App Work Nov 01 '12 at 08:23

score 8 · Answer 2 · edited May 23 '17 at 12:26

The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.

HTML:

<div id="container">
    <div class="wide">
        foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
    </div>
    <div class="wide">
        bar
    </div>
</div>

CSS:

.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }

(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)

I also set up a JS fiddle showing my demo code.

If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.

I later saw the JS fiddle mentioned in the comment by @anstosa — it's actually a similar solution using `table` and `table-row` as `display` style. Compatibility should be a little better with `inline-block` though; IE<8 does not support `table` according to [MSDN](http://msdn.microsoft.com/library/ms530751.aspx). — Jan Pöschko, Jan 02 '12 at 21:38

score 1 · Answer 3 · answered Jan 02 '12 at 20:16

1

.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }

You can try scroll or auto.

answered Jan 02 '12 at 20:16

Joop Eggen

107,315
7
83
138

Adding overflow/scroll to the divs made them contain the background color "all the way", but each div now scrolls independently. I did not think to mention that I want the entire page to behave like a page. – Lasse V. Karlsen Jan 02 '12 at 20:22
Then make one outer div class=success with the others inside. – Joop Eggen Jan 02 '12 at 20:29

score 1 · Answer 4 · answered Jan 11 '12 at 15:47

The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:

div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }

Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)

score 0 · Answer 5 · answered Jan 02 '12 at 20:09

0

It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.

Also make sure you set min-width:100% for body and html.

answered Jan 02 '12 at 20:09

Tomas Reimers

3,234
4
24
37

Setting the `min-width: 100%;` style on the div, body, and html, does not change the outcome, although the colored widths of the divs became a few pixels wider, it still stops around the edge of the screen. – Lasse V. Karlsen Jan 02 '12 at 20:20

Rob · Answer 6 · 2012-01-02T20:21:13.320

0

The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.

To maintain the minimum width: min-width:100%

edited Jan 02 '12 at 20:21

answered Jan 02 '12 at 20:10

Rob

14,746
28
47
65

score 0 · Answer 7 · answered Jan 10 '12 at 10:35

0

Try this,

.success { background-color: #ccffcc; float:left;}

answered Jan 10 '12 at 10:35

designersvsoft

1,861
9
39
66

score 0 · Answer 8 · answered Jan 15 '12 at 09:36

0

or try this,

.success { background-color: #ccffcc; overflow:auto;}

answered Jan 15 '12 at 09:36

Sufiyan Ghori

18,164
14
82
110

How to style a div to have a background color for the entire width of the content, and not just for the width of the display?

8 Answers8

Linked