Автоматическое расширение DIV с изображениями границ

Question

У меня есть DIV, границы которого состоят из изображений.Я пытаюсь сделать так, чтобы это DIV автоматически расширялось (только по высоте) всякий раз, когда контент не помещался в области контента.В противном случае он должен просто использовать минимальную высоту.Вот моя разметка:

XHTML:

<div id="alerts">
    <div id="alerts-top"></div>
    <div id="alerts-left"></div>

    <div id="alerts-content">
        <div id="alerts-header">
            <p>Alerts</p>
        </div>

        <div id="alerts-main">
            <!-- content in here -->
        </div>
    </div>

    <div id="alerts-right"></div>
    <div id="alerts-bottom"></div>
</div>

CSS:

#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; }

Это не работает для меня - между нижней границей илевая и правая границы.Область содержимого #alerts-main.

Answer 1

После пятиминутного рассмотрения я написал этот код, и он будет делать то, что вы хотите. Просто измените стили, чтобы добавить изображения в качестве фона. Сначала CSS:

#wrapper { position: relative; width: 500px; min-height: 350px; }
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; }
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; }
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; }
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; }
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; }
#content { text-align: justify; padding: 65px 20px 20px 20px; }

И HTML:

<div id="wrapper">
    <div id="top-margin">
        <div id="alerts">Alerts alerts alerts</div>
    </div>
    <div id="right-margin"></div>
    <div id="bottom-margin"></div>
    <div id="left-margin"></div>

    <div id="content">Lorem ipsum dolor sit amet etc...</div>
</div>

Высота #wrapper будет увеличиваться по мере добавления текста. Извините, что я изменил названия идентификаторов и оправдал текст. Но это легко исправить.

Answer 2

Попробуйте это для #alerts-bottom:

#alerts #alerts-bottom {
    float: left;
    background: url(../images/alerts-bottom.png) no-repeat;
    height: 11px;
    width: 258px;
    margin-top: -9px;
}

Используя отрицательное значение для свойства margin-top, вы определяете, как будет отображаться div (в этом случае вы заставите #alerts-bottom div визуализироваться 9px над отображением по умолчанию).

Надеюсь, это поможет.