CODEWITHSUNDEEP
csshtml
Sun P.
Sun P.

Reputation: 55

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>

Upvotes: 0

Views: 981

Answers (2)

MercPls
MercPls

Reputation: 127

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>"

Upvotes: 2

Heinrich Henning
Heinrich Henning

Reputation: 933

If you put box 3 below box 2, and add some margin-top to box 3, you get the effect that you want: 

.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;
  margin-top: 95px; 
}

.container {
	width: 100%;
}

@media screen and (max-width: 680px) {
	.box1 {
		width: 80%;
		background-size: 100%;
	}	

	.box2 {
		margin-top: 10px;
	}
}
<div class="continer">
This text should be above the container below. Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
<br /><br />
</div>

<div class="container">
	<div class="box1">
	Box 1: I want this image to be slightly above box 1 and underneath box 1. I want this image to adjust the size as the browser size changes.
		<div class="box2">
			Box 2:
			I want this box to be consistently on top of box 1. And I want this box to slightly hangoff the edge box 1.<br /><br /><br />
		</div>
	</div>
		<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>
</div>

Upvotes: 1

Related Questions