Note that there are some explanatory texts on larger screens.

plurals
  1. POHow Can I Make a Box Element Expand Automatically?
    primarykey
    data
    text
    <p>The link below shows a simplified version of a website I'm working on and the problem I'm presented with. </p> <p>I have several encapsulated box elements. There is the main container, and several divs within that container that will hold content, as that content expands, I need the <strong>container div to expand automatically</strong>. I can't seem to accomplish this unless I add a specific height in the CSS.</p> <p><a href="http://jsfiddle.net/wguayan/E4vWz/5/" rel="nofollow">JSFiddle Example</a></p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div id="container"&gt; &lt;div id="block1"&gt; &lt;div id="one"&gt;one&lt;/div&gt; &lt;div id="two"&gt;two&lt;br /&gt;two&lt;br /&gt;&lt;/div&gt; &lt;div id="three"&gt;three&lt;br /&gt;three&lt;br /&gt;three&lt;br /&gt;&lt;/div&gt; &lt;div id="four"&gt;four&lt;br /&gt;four&lt;br /&gt;four&lt;br /&gt;four&lt;br /&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>#container { width: 1050px; margin: auto; padding: 5px; background-color: #ededf0; background: url("http://wguayan.comuv.com/brushed_metal_clear_apple.jpg") repeat; } #one, #two, #three, #four { border-width: 1px; border-color: black; border-style: solid; background-color: white; border-radius:6px; -moz-border-radius:6px; /* Firefox 3.6 and earlier */ } #one { width: 100px; position: relative; top: 0px; left: 0px; padding: 10px; box-shadow: 9px 9px 12px #888888; } #two { float: left; width: 100px; position: relative; top: 0px; left: 0px; padding: 5px; text-align: center; box-shadow: 9px 9px 12px #888888; } #three { float: left; width: 100px; position: relative; top: 0px; left: 0px; padding: 10px; box-shadow: 9px 9px 12px #888888; } #four { float: left; width: 100px; position: relative; top: 0px; left: 0px; padding: 10px; box-shadow: 9px 9px 12px #888888; } #block1 { width: 100%; border-width: 1px; border-color: black; border-style: solid; } </code></pre>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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