CODEWITHSUNDEEP
htmlcsscontainersfullscreen
user3057089
user3057089

Reputation:

Fullwidth div inside a non-fullwidth

I would create something like this jsFiddle.
I have a container, with a 1024px width. Then I would create in the middle of the page a fullwidth-div, with for example an image.
In the example the yellow div should cover the blue one (that simulate my screen width ).
PS: I simplify the container, but think inside a wordpress wrapper where .red is the post and .yellow is the fullwidth-image. (Like HERE for example. I know that's made using the pages and not the posts )
HTML 

<div class="container">
<div class="red">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
    <div class="yellow">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
    </div>
    <div class="lime">some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
    </div>
</div>
</div>

CSS:

 .container{ background: blue; width: 400px;}
    .red {background:red; width: 200px; margin: 0 auto;}
    .yellow {background:yellow; width: 300px;}
    .lime {background:lime; width: 200px; margin: 0 auto;}

Upvotes: 0

Views: 132

Answers (2)

Maksym Vitalyevich Malin
Maksym Vitalyevich Malin

Reputation: 21

Try out thinking different changing css parameter instead of using background-color. I have tested it with :box-shadow parameter:

.toggle {
      box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}

Take a look at live example: fullwidth blue section here: http://kreditka.testovi-site.pw

Regards, Max

Upvotes: 0

Tom Spee
Tom Spee

Reputation: 9269

You should close .red before you open .yellow otherwise .red will be the parent of .yellow and if you put width:100%; on .yellow it will take the width:200px; from .red instead of .container.

Here is a JSFiddle.

Upvotes: 1

Related Questions