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    lt html gt   lt head gt   lt style gt  div   width  100      success   background-color   ccffcc     lt  style gt   lt  head gt   lt body gt   lt div class  success  gt   lt nobr gt 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  lt  nobr gt   lt  div gt   lt  body gt   lt  html gt    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  lt meta     viewport      gt  tag  did not make a difference  it is present in the test page right now   Background color stretches accross entire width of ul   lt div gt s are already block elements WebKit doesn  39 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

User · Accepted Answer

black magic     lt style gt  body   float left    success   background-color   ccffcc    lt  style gt    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

User · Answer

or try this    success   background-color   ccffcc  overflow auto

User · Answer

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

User · Answer

Try this    success   background-color   ccffcc  float left

User · Answer

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    lt div id  container  gt       lt div class  wide  gt          foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo      lt  div gt       lt div class  wide  gt          bar      lt  div gt   lt  div gt    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

User · Answer

The inline-block display style seems to do what you want  Note that the  lt nobr gt  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  lt nobr gt  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   -

User · Answer

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

User · Answer

success   background-color   cffccc  overflow  scroll  min-width  100       You can try scroll or auto

[css] 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?

Examples related to css

Examples related to html

Examples related to background-color