docze docze - 5 months ago 8
HTML Question

box with margin on full width of window

i have problem with simple layout. It should look like this https://postimg.org/image/40iejof2p/

my code look like:



body{
margin: 0;
padding: 0;
color: white;
}
#black{
background: black;
width: 100%;
margin: 0;
padding: 0;
}
#grey{
background: grey;
width: 100%;
margin: 2em;
}

<body>
<div id="black">
<p>something</p>
<div id="grey">
<p>2#something</p>
</div>
</div>
</body>





Unfortunately this way is wrong because appear scrollbar. Depends me for responsive solution.

Answer

Just don't set a width on #grey, and remove the right margin:

body{
  margin: 0;
  padding: 0;
  color: white;
 }
#black{
  background: black;
  width: 100%;
  margin: 0;
  padding: 0;
}
#grey{
  background: grey;
  margin: 2em;
  margin-right:0;
 }
<body>
  <div id="black">
    <p>something</p>
    <div id="grey">
      <p>2#something</p>
    </div>
  </div>
 </body>

Since #grey is a div, and is a block element by default, it will fill the available space.