Databases
StackOverflow2013
Postsdbo
POmake div's height expand with its content
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmake div's height expand with its content
    primarykey
    data
    text
    <p>I have these nested divs and I need the main container to expand (in height) to accomodate the DIVs inside</p> <pre class="lang-html prettyprint-override"><code> &lt;!-- head --&gt; ... &lt;!-- /head --&gt; &lt;body class="main"&gt; &lt;div id="container"&gt; &lt;div id="header"&gt; &lt;!--series of divs in here, graphic banner etc. --&gt; &lt;/div&gt; &lt;div id="main_content"&gt; &lt;!-- this DIV _should_ stretch to accomodate inner divs --&gt; &lt;div id="items_list" class="items_list ui-sortable"&gt; &lt;div id="item_35" class="item_details"&gt; &lt;/div&gt; &lt;div id="item_36" class="item_details"&gt; &lt;/div&gt; &lt;div id="item_37" class="item_details"&gt; &lt;/div&gt; &lt;!-- this list of DIVs "item_xx" goes on for a while each one representing a photo with name, caption etcetc --&gt; &lt;/div&gt; &lt;/div&gt; &lt;br class="clear"/&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS is this:</p> <pre class="lang-css prettyprint-override"><code>* { padding: 0; margin: 0; } .main { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #4c5462; margin: 0; padding: 0; text-align: center; color: #000000; } .main #container { height: auto; width: 46em; background: #4c5462; margin: 0 auto; border: 0px solid #000000; text-align: left; } .main #main_content { padding: 5px; margin: 0px; } #items_list { width: 400px; float: left; } .items_list { width: 400px; float: left; } .item_details { margin-top: 3px; margin-bottom: 3px; padding: 3px; float: left; border-bottom: 0.5px solid blue; } </code></pre> <p>The problem I have is that <code>#main_content</code> doesn't stretch to accomodate all the inner divs, with the result that they keep going against the background.</p> <p>How can I solve this?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USEliran Malka
    1. USpatrick
    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. POmake div's height expand with its content
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POmake div's height expand with its content
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POmake div's height expand with its content
      1. This table or related slice is empty.
      1. VTUpMod
    1. COGuys thank you all for the answers! the best solution for my specific case was to hard-code a BR to clear both sides (thanks Jennyfofenny and also Ricebowl) Anyway, also other solutions have worked: putting overflow:auto was ok, and floating #main_content was also ok (although ir reduced the width of that div to the size of child divs). Now being a newbie I'm wondering: do these solutions have drawbacks, or I can use them indifferently? (eg. maybe one of them doesn't work with IE6, or similar...)
      singulars
      1. POmake div's height expand with its content
      1. USpatrick
    2. CO@Patrick, if you want to further develop your question, click on the 'edit' link (below the current text of the question) and add in the further questions. Convention suggests using something like `<strong>Edited</strong>$Reason_for_revising_question...` You may need to change the question title to reflect the changes if there's a major change or addition in its focus. =)
      singulars
      1. POmake div's height expand with its content
      1. USDavid Thomas
    3. COYou also never closed the `div` tag with `id='container'`. That could cause some problems.
      singulars
      1. POmake div's height expand with its content
      1. USBatkins
 

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