CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BoneStarr
BoneStarr

Reputation: 195

Make child DIV larger than parent DIV with jQuery

I want to make the Child Div of a fix width Parent 100% width, like so:

Child Div 100% width of a fix width Parent

I am aware that there are multiple questions about this, unfortunately none answer the underlining issue of content not displaying properly underneath the child DIV.

I know that with CSS this is partially achievable:

.child-div {
    position: absolute;
    left: 0;
    right: 0;
}
.parent-div {
    position: static;
    max-width: 900px;
}

I am working within a CMS which means I can't tailor the HTML to open and close the wrapper either which would be the correct solution to this of course. But I know there are people out there that would need to do it this way too for many other reasons.

The other problem is that by using this method, all the content underneath the Child shows up behind the .child-div, it doesn't sit underneath. I understand that this because by making it absolute it no longer sits in the flow of the content.

I understand why this wont work, but is there a solution using jQuery or Javascript instead?

http://jsfiddle.net/d4tjkwnc/

Upvotes: 0

Views: 986

Answers (4)

leonsaysHi
leonsaysHi

Reputation: 375

This is how I would do it :

Assuming this markup : 

<div class="parent">
    [content before]
    <div class="child"></div>    
    [content after]
</div>

Here is the CSS :

// for decorative purpose
div{min-height:100px;padding:50px 0;}

.parent {
    width:900px; margin:0 auto; // parent width (in px or %) and centering
    background-color:grey;
}
.child {        
    background-color:blue;
}
@media (min-width: 900px) {
    .child {
        position:relative; left:50%; // centered position
        width:100vw; // set width to 100% of the view port width
        margin-left:-50vw;// margin left of 50% of the viewport width
    }
}

JSFiddle : https://jsfiddle.net/whytk3xt/4/

Upvotes: 0

MMM
MMM

Reputation: 7310

It is possible to solve this problem with just using CSS and without position absolute (if you don't care about IE8 support).

Your CSS should look like this:

.child-div {
    left: 0;
    right: 0;
    border: 1px solid blue;
    height: 100px;
}
.parent-div {
    position: static;
    max-width: 900px;
    border: 1px solid black;
    height: 300px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .child-div {
        /* 450px is 900px/2 and 50vw is 50% of the viewport */
        margin: 0 calc(450px - 50vw); 
    }
}

You basically us the power of negative margins and the calc() "function" and since you're not using position absolute, you have all your problems solved.

http://jsfiddle.net/wfverf6d/1/

Upvotes: 1

Raja Sekar
Raja Sekar

Reputation: 2130

*{margin:0 ;padding: 0}
.parent{width:960px; margin:0 auto;height: 750px; border: 1px solid black; }
.child{position: absolute;top:0;width: 100%; margin-top: 100px; border: 1px solid red;height: 100px;background-color: #fff;}
<div class="parent">
  <div class="child"></div>
</div>

Try to avoid using position, unless it is required. I made this mark up based on the wireframe you given.

Upvotes: 0

Anwar
Anwar

Reputation: 4246

.container {
  position : absolute;
  top : 0;
  bottom : 0;
  left : 25%;
  right : 25%;
  border : solid 2px black;
  border-radius : 2px;
}

.contained {
  border : solid 2px blue; 
  border-radius : 2px;
  position : fixed; /* here is the trick */
  top : 10%;
  left : 0;
  right : 0;
  height : 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="container">
      <div class="contained">
        
      </div>
    </div>
  </body>
</html>

Use position : fixed to reach your goal. When using absolute in a div you already used absolute, it will only stuck to the corner of the container div. fixed works with entire viewport.

Upvotes: 0

Related Questions