Sun P. Sun P. - 1 month ago 7
CSS Question

How can I have a div take up the full width of the screen?

This might be simple, but I have a few nested divs that use media queries for sizing. I initially had box 3 as separate div below the container, but caused issues. So I included in the container and below the box 2 div. I would like for this div box 3 to take up the entire width of the screen.

Here is the example: https://jsfiddle.net/nsnhsLjq/

Also appreciate any feedback on improving my code altogether. Thanks.

.box1 {
width: 50%;
padding: 15px;
height: 150px;
background: url(https://static.pexels.com/photos/27714/pexels-photo-27714.jpg) no-repeat center center scroll;
background-position: 50% 50%;
background-size: 90%;
margin: 0 auto;
}

.box2 {
width: 80%;
padding: 15px;
background-color: blue;
color: #fff;
margin: 0 auto;
margin-top: 80px;
}

.box3 {
background-color: #ccc;
text-align: center;
}

<div class="container">
<div class="box1">
<div class="box2">
Box 2:
</div>

<div class="box3">
Box 3:
</div>
</div>
</div>

Answer

https://jsfiddle.net/MarcusPls/h6sprgnm/

.box3 {
    background-color: #ccc;
    text-align: center;
  width: 100%;
  top: 100px;
  position: relative;
}

<div class="box3">
Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser.
</div>

Here is an example of one way to work around your problem..

Also, you don't need to use /> for <br> to break a line... it is like pressing the enter key so just use "<br>"

Comments