CODEWITHSUNDEEP
htmlcss
dhanaraj
dhanaraj

Reputation: 1

how to make a child DIV's width wider than the parent DIV using position styles

Can anyone help me?

My code below is not working in responsive mode.

Parent container placement should be at the right side of the screen.

Here's my code

.parent {
  position:relative;
  width:250px;
  border:1px solid red;
  height:200px;

}    
.child {
  position:absolute;
  width:100%;
  left:-100px;
  right:-100px;
  border:1px solid blue;
}
<div class="parent">
  <div class="child">
    <p>Need width 100% by screen resolution</p>
  </div>
</div>

Upvotes: 0

Views: 90

Answers (3)

kdyz
kdyz

Reputation: 1550

.child {
  position:absolute;
  width:150%;
  border:1px solid blue;
}

You don't need to have left and right values when you have width, unless you want to specify the position.

A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as

left:0; 
right:0;

is similar to 

left:0;
width:100%;

With this, you could specify a 

left:0;
right:-10%;

and it would be equivalent to a

left:0;
width:110%;

P.S. you could also use VW and VH instead of %. A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.

Upvotes: 1

StackSlave
StackSlave

Reputation: 10627

Like so:

html,body{
  margin:0; padding:0;
}
.main{
  width:980px; background:darkGreen; margin:0 auto;
}
.rel{
  width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
  width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
  </head>
<body>
  <div class='main'>
    <div class='rel'><div class='abs'></div></div>
  </div>
</body>
</html>

Upvotes: 1

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.

html,body{
  width:100%;
  height:100%;
  }
.parent {
  /*position:relative;*/
  width:250px;
  border:1px solid red;
height:200px;

}    
.child {
  position:absolute;
  width:100%;
  left:-100px;
  right:-100px;
border:1px solid blue;
}
<div class="parent">
  <div class="child">
    <p>Need width 100% by screen resolution</p>
  </div>
</div>

Upvotes: 0

Related Questions