Как сделать - 3-х колоночная верстка, бока резиновые, центр с минимальной шириной.

dmitry_d · September 10, 2012

Необходимо сделать вот такой макет (за исключением проблемных мест)

Левая и правая внешняя колонка "резиновая". Центральная колонка должна быть по центру, тоже "резиновая", но есть минимальная ширина.

Еще дело осложняется тем, что центральная колонка обрамлена справа и слева разделителями 2px (разделитель должен быть растровый из картинки)

В центральной колонке тоже "резиновые" 3 колонки (решение брал отсюда Резиновая 3-х колоночная верстка).

<html>

    <head>
        <style type="text/css">
            html, body {
                height:100%;
                min-height:100%;
                margin:0;
                padding:0;
                border:0;
            }
            #wrapper {
                position: relative;
                height:100%;
                width: 100%;
                overflow:hidden;
                background-color:#5FA8D0;
            }
            #sideLeft {
                position: relative;
                width: auto;
                float: left;
                /*background-color:#5FA8D0;*/
                height:100%;
                background-color: #C93;
            }
            #sideRight {
                float: left;
                width: auto;
                /*background-color:#5FA8D0;*/
                position: relative;
                min-height:100%;
                background-color: #69C;
            }
            #sideLeftSep {
                float: left;
                width: 2px;
                margin-left: -2px;
                position: relative;
                height:100%;
                background-color: #036;
            }
            #sideRightSep {
                float: left;
                width: 2px;
                position: relative;
                height:100%;
                background-color: #036;
                margin-left:100%;
                top:-100%;
            }
            #container {
                width: 50%;
                min-width: 950px;
                background-color:#F3F9FC;
                position: relative;
                height:100%;
                margin:0 auto;
            }
            .mod-wrap1 {
                float: left;
                width: 100%;
                height:100%;
                overflow: hidden;
                background: #89FFA2;
            }
            .mod-wrap2 {
                clear: left;
                float: left;
                width: 100%;
                position: relative;
                right: 25%;
                background: #FFA7A7;
                height:100%;
            }
            .mod-wrap3 {
                float: left;
                width: 100%;
                position: relative;
                right: 50%;
                background: #FFF689;
                height:100%;
            }

            .item-page {
                float: left;
                width: 48%;
                position: relative;
                left: 78%;
                overflow: hidden;
            }

            #footer {
                height: 25px;
                width: 950px;
                overflow:hidden;
                bottom:0px;
                position:absolute;
                clear:both;
                background-repeat:repeat-x;
                background: #F00;
                margin:0 auto;
            }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="container">
                <div id="sideLeftSep"></div>
                <div>Лого</div>
                <div>menu</div>
                <div class="mod-wrap1">
                    <div class="mod-wrap2">
                        <div class="mod-wrap3">
                            <div id="leftcolumn">Левая колонка</div>
                            <div class="item-page">Центр</div>
                            <div id="rightcolumn">Правая колонка</div>
                        </div>
                    </div>
                </div>
                <div id="sideRightSep"></div>
                <div id="footer">
                    <p>Подвал</p>
                </div>
            </div>
        </div>
    </body>

</html>

К сожалению, данный макет не работает в IE.

P.S. Я читал прикрепленную тему о резиновой верстке на 3 колонки, но там колонки фиксированной ширины, а мне нужны резиновые. Также я пробовал переделать под мой макет - цвет фона wrapper поставить мой, а левую и правую колонки фиксированной ширины использовать как разделители по бокам, но не получилось.

Great Rash · September 10, 2012

http://jsfiddle.net/UeHM9/1/

dmitry_d · September 10, 2012

http://jsfiddle.net/UeHM9/1/

Ну так было бы очень просто.

А можно сделать, чтобы ширина колонок справа и слева оставалась одинаковой при уменьшении разрешения?

Great Rash · September 10, 2012

А можно сделать, чтобы ширина колонок справа и слева оставалась одинаковой при уменьшении разрешения?

Можно. Задать ее в пикселях.

Sign In

Как сделать - 3-х колоночная верстка, бока резиновые, центр с минимальной шириной.

Question

dmitry_d

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

dmitry_d

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information