CSS - Fixed width layout

Question

I'm writing the code for a fixed width design and I have a very simple problem that I can't seem to get around:

<div style="background-color:black">
  <div style="width:900px;margin:0 auto">
    content
  </div>
</div>

If the browser window width is, let's say, 500px, then the black background takes only 500px width and the inner div stays at 900px. Why isn't the outer div taking up 900px to acomodate the inner div?

Are you looking for the reason this happens, a way to fix it so that the parent expands to cover the child's width, or both? — j08691, Nov 04 '15 at 14:18

score 0 · Accepted Answer · answered Nov 04 '15 at 14:21

A block element does only use the full width of the viewport if not specified in any way. Use the first div as an inline-block element and it will work:

<div style="background-color:black; display: inline-block;">
  <div style="width:900px;margin:0 auto">
    content
  </div>
</div>

CSS - Fixed width layout

1 Answers1