Databases
StackOverflow2013
Postsdbo
POHow to make CSS width to fill parent?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make CSS width to fill parent?
    primarykey
    data
    text
    <p>I am sure this problem has been asked before but I cannot seem to find the answer.</p> <p>I have the following markup:</p> <pre><code>&lt;div id="foo"&gt; &lt;div id="bar"&gt; here be dragons &lt;/div&gt; &lt;/div&gt; </code></pre> <p>My desire is to make foo to have width of <code>600px</code> (<code>width: 600px;</code>) and to make bar have the following behaviors: </p> <pre><code>padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; outerWidth: 100%; </code></pre> <p>In other words instead of setting width of bar to <code>592px</code> I would like to set the outer width of bar to <code>100%</code> so that it is computed to <code>592px</code>. The importance here is that I can change foo's width to <code>800px</code> and bar will calculate when rendered instead of me having to do the math for all these instances manually.</p> <p>Is this possible in pure CSS?</p> <p>Some more fun with it:</p> <ul> <li>What if <code>#bar</code> is a table? </li> <li>What if <code>#bar</code> is a textarea? </li> <li><p>What if <code>#bar</code> is an input?</p></li> <li><p>What if <code>#foo</code> is a table cell (<code>td</code>)? (Does this change the problem or is the problem identical?)</p></li> </ul> <hr> <p>So far the <code>table#bar</code>, <code>input#bar</code> has been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a <code>div</code> wrap might work with the <code>div</code> styled to work as borders for the <code>textarea</code>.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJawa
    1. USDmitriy Likhten
    plurals
    1. This table or related slice is empty.
    1. 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. POHow to make CSS width to fill parent?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to make CSS width to fill parent?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to make CSS width to fill parent?
      1. USDmitriy Likhten
      1. VTFavorite
    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