Databases
StackOverflow2013
Postsdbo
POAuto expand DIV with border images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAuto expand DIV with border images
    text
    copied!<p>I have a DIV who's borders are made up of images. What I'm trying to do is have this DIV auto expand (in height only) whenever the content does not fit the content area. Otherwise it should just use the min-height. Here is my markup:</p> <p>XHTML:</p> <pre><code>&lt;div id="alerts"&gt; &lt;div id="alerts-top"&gt;&lt;/div&gt; &lt;div id="alerts-left"&gt;&lt;/div&gt; &lt;div id="alerts-content"&gt; &lt;div id="alerts-header"&gt; &lt;p&gt;Alerts&lt;/p&gt; &lt;/div&gt; &lt;div id="alerts-main"&gt; &lt;!-- content in here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="alerts-right"&gt;&lt;/div&gt; &lt;div id="alerts-bottom"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#alerts { float: left; width: 267px; height: 200px; } #alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; } #alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; } #alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; } #alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; } #alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; } #alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; } #alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; } </code></pre> <p>This isn't working for me - there is a gap between the bottom border and the left and right borders. The content area is <code>#alerts-main</code>.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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