Тема: Помогите с CSS-версткой

Вот что-то не пойму я как выровнять 2 div-а по высоте! Ну бьюсь и бьюсь над ними.... весь интернет перелопатил, и Ваши шаблоны смотрел — не получается выровнять по высоте 2 div-а и хоть ты тресни! Может кто чего подскажет!???
Примеры кодов:
CSS

@charset "utf-8";
/* CSS Document */
body,td,th {
    font-family: georgia;
    font-size: 12px;
    color: #FAEBD7;
}
body {
    background-color: #8B4513;
    height:960px;
    vertical-align:top;
}
/*Page main ID*/
#page {
    width:960px;
    height:100%;
    margin:2px auto 2px;
}
#top {
    width:960px;
    padding:12px 0;
    background:#8B4513 url(/img/topImg.jpg);
}
#top h1 {
    font-size:24px;
    color:#FFFAF0;
    font-family:verdana;
    font-style:italic;
    text-shadow:  1px 1px 0px #333333;
    filter:dropshadow(color= 1px 1px 0px #333333);
}
#top h1 a {
    font-size:24px;
    color:#FFFAF0;
    font-family:verdana;
    font-style:italic;
    text-shadow:  1px 1px 0px #333333;
    filter:dropshadow(color= 1px 1px 0px #333333);
    margin-left:15px;
}
#header {
    background-color: #8B4513;
    width:960px;
    height:300px;
}
#leftCol {
    width:300px;
    background:#8B4513 url(/img/leftImg.jpg) no-repeat bottom center;
    padding: 0;
    height:100%;
    float:left;
    vertical-align:top;
}
#rightCol {
    margin-left:300px;
    padding: 0;
    background:#8B4513 url(/img/rightImg.jpg) no-repeat bottom center;
    width:660px;
    vertical-align:top;
    height:100%;
}
#footer {
    clear:both;
    padding:70px 0;
    font-size:10px;
    color:#8B4513;
    text-align:center;
    padding:60px 0;
    background:#8B4513 url(/img/footerImg.jpg) no-repeat center;
}
#footer a,a:hover {
    font-size:10px;
    color:#8B4513;
    text-decoration:underline;
}
***

HTML

<body>
<div id="page">
    <div id="top">
        <h1><a href="/">Ремонт под ключ в Днепропетровске</a></h1>
    </div>
    <div id="header">
        <div class="slideshow">
            <img src="/img/slide/img1.jpg" width="960" height="300">
            <img src="/img/slide/img2.jpg" width="960" height="300">
            <img src="/img/slide/img3.jpg" width="960" height="300">
        </div>
    </div>
    <div id="leftCol">
        <div class="leftColNameBox">
            <span>Навигация</span>
        </div>
        <div class="leftColContant">
            <ul>
                <li><a href="#">Ремонт квартиры</a></li>
                <li><a href="#">Ремонт ванной</a></li>
                <li><a href="#">Укладка паркета</a></li>
                <li><a href="#">Винтовая лестница</a></li>
                <li><a href="#">Гипсокартон</a></li>
                <li><a href="#">Балконы и лоджии</a></li>
                <li><a href="#">Окна и двери</a></li>
            </ul>
        </div>
        <div class="leftColNameBox">
            <span>Полезное</span>
        </div>
        <div class="leftColContant">
            <ul>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
            </ul>
        </div>
    </div>
    <div id="rightCol">
        <div class="rightColNameBox"><span>Главная страница</span></div>
        <div class="rightColContant">
        <p></p>
        </div>
    </div>
    <div id="footer"><a href="/">&copy; Company Name</a><br><a href="http://www.maxi-m.pp.ua" target="_blank">Maxi M Studio</a></div>
</div>
</body>

Системный администратор - это либо диагноз, либо сексуальная ориентация!

Ответ: Помогите с CSS-версткой

Сайдбару задаем position: absolute, top: 0, left: 0, указываем 100% высоту и N-ую ширину. Контенту задаем position: relative, width: auto, padding-left (если сайдбар расположен слева): Npx, где N - это ширина сайдбара + отступ от него. Таким образом сайдбар можно в HTML коде прописать после основной части, оптимизируя наш макет (если только главное меню не находится в боковой колонке, но это уже совсем другая история) + помогает при адаптивной верстке. Если желаете, могу быстренько набросать пример.

Отредактировал chupok (17-06-2014 07:10:25)