Databases
StackOverflow2013
Postsdbo
POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
    primarykey
    data
    text
    <p>Is there a way to have a child DIV within a parent container DIV that is wider than it's parent. The child DIV needs to be the same width of the browser viewport.</p> <p>See example below: <img src="https://i.stack.imgur.com/MRgm9.gif" alt="enter image description here"></p> <p>The child DIV <strong>must</strong> stay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can't work out how to essentially make it 100% width of the browser.</p> <p>I know I can do this:</p> <pre><code>.child-div{ margin-left: -100px; margin-right: -100px; } </code></pre> <p>But I need the child to be the same width as the browser which is dynamic.</p> <h2>Update</h2> <p>Thanks for your answers, it seems the closest answer so far is to make the child DIV position: absolute, and set the left and right properties to 0. </p> <p>The next problem I have is that the parent has position: relative, which means that left and right properties are still relative to the parent div and not the browser, see example here: <a href="http://jsfiddle.net/v2Tja/2" rel="noreferrer">jsfiddle.net/v2Tja/2</a></p> <p>I can't remove the position relative from the parent without screwing everything else up.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCamsoft
    1. USCamsoft
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYour requirements don't really make sense. The "child div" must stay as a child of the parent div, and yet the parent div has `position: relative`? What do you need `position: relative` for? I guess what I'm asking is: what are you trying to do?
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. USthirtydot
    2. CO@Camsoft Did you see my comment on my answer? That works for me, Also check my website http://edocuments.co.uk/ which does what you are trying to do in a different way
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. USBlowsie
    3. CO@Camsoft in addition , there really should be no need for any jquery / js in your solution
      singulars
      1. POIs there are way to make a child DIV's width wider than the parent DIV using CSS?
      1. USBlowsie
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload