Databases
StackOverflow2013
Postsdbo
POHow do I make all child <div>s expand to the length of parent div when one child causes parent to expand?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I make all child <div>s expand to the length of parent div when one child causes parent to expand?
    primarykey
    data
    text
    <p>I've seen this question asked a hundred times and I've tried all the solutions given and I still haven't managed to get this to work.</p> <p>The problem: I have a parent DIV with four child DIVs two with content, two only for looks:</p> <p>([site shadow] [left menu] [content area] [right shadow])</p> <p>When the content area has enough text to expand the content area I want the right shadow and left menu graphics to expand down the page with the rest of the DIVs.</p> <p>I have tried adding a clear:both to the parent div and that does nothing. I'll include the relevant code below.</p> <p>I should add that the shadow on the right of the web page disappears completely when adding a height % to the parent DIV</p> <p>Additionally if I add a very large height:4000px to the parent div everything cooperates like I want, although I want the site to re-size to content not just to 4000px.</p> <p>The relevant HTML:</p> <pre><code>&lt;div id="body_area"&gt; &lt;div id="body_left"&gt;&lt;/div&gt;&lt;!-- just a left page graphic --&gt; &lt;div id="sidebar"&gt; some info here &lt;/div&gt; &lt;div id="content_area"&gt; enough text here to cause the div to expand beyond browser height. &lt;/div&gt; &lt;div id="body_right"&gt;&lt;/div&gt; &lt;!-- just a right shadow graphic --&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And the relevant CSS</p> <pre><code>#body_area{ overflow:auto; width:1024px; margin:0px auto; clear:both; } #body_left{ height:516px; width:25px; margin:0px; background:url("images/body_left.jpg") repeat-y; float:left; } #body_right{ height:100%; width:28px; margin:0px; background:url("images/body_right.jpg") repeat-y; float:left; } #sidebar{ height:100%; width:213px; margin:0px; background:url("images/side_menu.jpg") repeat-y; float:left; } #content_area{ height:100%; width:758px; margin:0px; background:url("images/content_area.jpg") repeat-y; float:left; } #footer{ height:34px; width:1024px; margin:0px auto; background:url("images/footer.jpg"); float:left; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USleigero
    1. USleigero
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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