Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extend child div beyond container div

I'm trying to expand this div across with width of the browser. I've read from here that you can use {position:absolute; left: 0; right:0;} to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/

But the problem is that my current #container has a {position:relative;} property, and hence if I apply {position:absolute} to the child div, it would only refer to #container. Is there a way to still extend my child div beyond the #container?

like image 520
Ryan Ma Avatar asked Oct 11 '12 22:10

Ryan Ma


People also ask

How do you make a child div wider than a parent div?

In this case, we set the child element's width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport's half, minus 50% of the width of the parent element) with the left property.

How do you make a div longer?

You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).

How do I make my div expand upwards?

Use absolute positioning and instead of setting the offset with top use bottom . With this property you can ensure the position of the bottom edge of your div - any change in size will force the div to expand upwards.


2 Answers

I can think of five ways to potentially accomplish your goal:

  1. Use negative margins on the inner element to move it outside of the parent

  2. Use Javascript to move the inner element outside of the parent.

  3. Change the source code and move the inner element outside of the parent.

  4. Use position: fixed on the inner element. This will allow the inner element to break out but has the down side that the element will be fixed at the given position (never moving).

  5. Remove the position: relative; from the parent element or give the parent element a position: static

like image 170
Brett Avatar answered Sep 19 '22 13:09

Brett


You can try adding overflow:visible to the parent div, then making the child wider than the parent.

like image 38
Jules Avatar answered Sep 20 '22 13:09

Jules