CODEWITHSUNDEEP
htmlcsscss-position
tokmak
tokmak

Reputation: 459

Move child DIV outside parent DIV

I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck.

<div class="wrapper">
  ...Some other code...
    <div class="banners">
        <div class="first"><img src="http://placehold.it/200x200"></div>
        <div class="second"><img src="http://placehold.it/200x200"></div>
    </div>
   ...Some other code...
</div>

Fiddle can be found here http://jsfiddle.net/qMYQw/

Beside "banners" div, there are few more sections both above and bellow that div, thats the reason it "banners" are in wrapper

P.S There are other sections above/bellow the banner DIV, so simply setting up the position:absolute doesnt do the trick

Upvotes: 6

Views: 18466

Answers (7)

Paulie_D
Paulie_D

Reputation: 115342

The simplest answer is to take your banners div out of the wrapper and restart a new wrapper after the banners div

JSfiddle Demo

HTML

<div class="wrapper"></div>

<div class="banners">
    <div class="first">
        <img src="http://placehold.it/200x200"/>
    </div>
    <div class="second">
        <img src="http://placehold.it/200x200"/>
    </div>
</div>

<div class="wrapper"></div>

CSS

.wrapper {
    width:500px; /* or whatever */
    height:200px; /* demo height only */
    margin:0 auto;
    border:1px solid red;
}
.banners {
    overflow: hidden; /* quick clearfix */
}
.banners img {
    width:100%;
    border:1px solid blue;
}
.banners .first, .banners .second {
    float:left;
    width:50%;
}

Upvotes: 0

doppler
doppler

Reputation: 903

If you like the way your HTML is structured, you can simply tell the banners to be 2x larger and let the images fill the rest of the space.

.wrapper {
    width: 150px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid red;
}
.banners { 
    width: 200%;
    margin-left: -50%; 
}
.banners .first, 
.banners .second {
    float: left;
    width: 50%;
}
.banners img {
    width: 100%;
    border: 1px solid blue;
}
<div class="wrapper">
    <div class="banners">
        <div class="first"><img src="http://placehold.it/150x150"></div>
        <div class="second"><img src="http://placehold.it/150x150"></div>
    </div>
</div>

Upvotes: 0

Gibbs
Gibbs

Reputation: 22974

Fiddle

.banners img {  
    width:100%;
}

.banners .first, .banners .second {
    float:left;
    width:50%;
    position: absolute;
    left:0;
    border:1px solid blue;
}

.banners .second {
    margin-left: 50%;
}

Upvotes: 1

Rahiil
Rahiil

Reputation: 110

Use z-index

.wrapper {
    z-index : 1
}

.banners {
    position : absolute;
    left : 0;
    width: 100%;
    z-index:2
}

Upvotes: 0

Er. Sajal Tiwari
Er. Sajal Tiwari

Reputation: 118

Place this in ypur css and see result: Here is fiddle

.wrapper {
    width:500px;
    height:600px;
    margin:0 auto;
    border:1px solid red;

}
.banners img {
    width:100%;
    border:1px solid blue;

}
.banners .first, .banners .second {
    float:left;
    width:49%;
    height:1200px;
    border:1px solid GREEN;
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Use position:absolute for your banner.

.banners{position:absolute; left:0; width:100%;}

DEMO

Upvotes: 0

Brandon Gano
Brandon Gano

Reputation: 6720

Use position: absolute only on the .banners div and it should do the trick. Note that you'll also need to set left: 0.

Updated fiddle: http://jsfiddle.net/qMYQw/3/

Upvotes: 0

Related Questions