Css макет перекрытия

Question

Здравствуйте, я пытаюсь заставить мои столбцы в CSS перейти вниз по странице.Я новичок в css, но знаю некоторые css для того, чтобы возиться с вещами.

Мои столбцы расположены рядом друг с другом, вот так:

collum1 collum2

Я пытаюсь сделать ихперейдите по странице примерно так:

collum1
collum2

Но, похоже, не хочет двигаться ...

Вот мой источник страницы для левой боковой панели.

<div class="col1">

            <div class="box" id="news">

                <h1 id="news_handle">Home</h1>

                <ul>
                    <li><a href="login.php">Login</a></li>
                    <li><a href="../register.php">Register</a></li>
                </ul>

                <div class="bar">
                    <span>
                <span></span></span></div>

            </div>


  <div class="box" id="events"></div>
</div>


<div class="co22">

            <div class="box" id="news">

                <h1 id="news_handle">22</h1>

                <ul>
                    <li><a href="login.php">1212</a></li>
                    <li><a href="../register.php">1212</a></li>
                </ul>

                <div class="bar">
                    <span>
                <span></span></span></div>

            </div>


  <div class="box" id="events"></div>
</div>

Тогда вот мой стиль / файл css

body
{
    background: #122530 url('./images/background.jpg') repeat-y;
    text-align: center;
    font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}

a,a:visited
{
    color: #1e3f51;
}
a:hover
{
    text-decoration: none;
}

a img,a:visited img
{
    border: 0;
}


/**
 * General Structure
 */

div#container
{
    width: 873px;
    margin: 0 auto 0 auto;
    text-align: left;
}


/**
 * Banner/Nav
 */
div#banner
{
    height: 255px;
    background: url('./images/banner.jpg') no-repeat;
    margin: 0 0 10px 0;
    clear: both;
}

div#nav
{
    background: url('./images/nav_bg.jpg') no-repeat;
    height: 35px;
    margin: 1px 0px 0px 2px;
    width: 100%;
    overflow: hidden;
    float: left;
}

    div#nav a
    {
        color: #ffffff;
        font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
        text-decoration: none;
        height: 12px;
        display: block;
        float: left;
        padding: 11px 7px 11px 7px;
        text-transform: uppercase;
        margin: 1px 0 0 0;
    }

    div#nav a:hover
    {
        background: url('./images/nav_hover.jpg') repeat-x;
    }


/**
 * Columns
 */
div.col1,div.col2
{
    float: left;
}

div.col1
{
    width: 190px;
}

div.col2
{
    width: 479px;
    margin: 0 7px 0 7px;
}


/**
 * Columns
 */
div.co22
{
    float: left;
}

div.co22
{
    width: 190px;
}

div.co22
{
    width: 479px;
    margin:25px 50px 75px;
}


/**
 * Box Elements
 */
div.box
{
    margin: 0 0 10px 0;
}

div.box h1
{
    height: 29px;
    color: #ffffff;
    font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
    padding: 6px 0 0 10px;
    margin: 0;
    border-bottom: 1px solid #112735;
    cursor: move;
}

    div.col2 div.box h1
    {
        cursor: auto;
    }

    div.col1 div.box h1
    {
        background: url('./images/col1_head.jpg') no-repeat;
    }

    div.col2 div.box h1
    {
        background: url('./images/col2_head.jpg') no-repeat;
    }


div.box div.bar
{
    height: 23px;
    clear: both;
    background: url('./images/box_foot.jpg') repeat-x;
    color: #d1e3ee;
    font: 11px Tahoma;
}

    div.box div.bar span
    {
        height: 23px;
        display: block;
        background: url('./images/box_foot_left.jpg') no-repeat;
        float: left;
        padding: 4px;
    }

    div.box div.bar span span
    {
        height: 23px;
        width: 2px;
        background: url('./images/box_foot_right.jpg') top right no-repeat;
        float: right;
        display: block;
        margin: -4px;
    }

    div.box div.bar a
    {
        display: block;
        color: #d1e3ee;
        text-decoration: none;
    }
    div.box div.bar a.right
    {
        text-align: right;
    }

div.content
{
    margin: 0 2px 0 2px;
    background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
    border: 1px solid #ffffff;
    padding: 10px 0 10px 0;
}

    div.content p
    {
        margin: 0;
        padding: 5px;
    }


/**
 * Lists
 */
ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul li
    {
        background: url('./images/list_item.jpg') repeat-x;
        border: 1px solid #112735;
        border-top: 0px;
        height: 14px;
        padding: 4px;
    }

    ul li a
    {
        display: block;
        text-decoration: none;
        height: 14px;
    }

ul.sponsors li
{
    background: url('./images/list_sponsor.jpg') repeat-x;
    height: 48px;
    padding: 0;
}

    ul.sponsors li a
    {
        height: 48px;
    }


/**
 * Footer
 */
div#footer
{
    background: url('./images/footer.jpg') no-repeat;
    height: 36px;
    clear: both;
}

div#footer a
{
    display: block;
    height: 36px;
}

div#footer a span
{
    display: none;
}

Я бодрствовал 12 часов, просматривая Google и пытаясь свалить их друг под друга без удачи.

Answer 1

Хорошо. Посмотрели ваш код с помощью firebug.

Почему вы вставляете более одного

<div class="col1">
    ...
</div>

Вы должны просто поместить все блоки в один столбец col1.Вам не нужно два из них.

По сути, не используйте две версии col1, но поместите все поля в один и тот же col1, один под другим.

<div class="col1">
    <div class="box" id="news" style="position: relative; "></div>
    <div class="box" id="events" style="position: relative; "/> </div>
    <div class="box" id="news" style="position: relative; "></div>
    <div class="box" id="events" style="position: relative; "/> </div>
</div>

Если вам нужноПолучите прямой доступ к каждой ячейке, а затем разделите их, используя разные идентификаторы: id = "news1", id = "news2" ...

--- EDIT ---

Ну, я пробовали посмотрите:

HTML для одного из ваших col1 (одинаково для обеих сторон).

<div class="col1">

    <div class="box" id="news">

        <h1 id="news_handle">Home</h1>

    <ul>

    </ul>

    <div class="bar">
        <span>
        <span></span></span></div>
    </div>
    <div style="height:20px;">&nbsp;</div>
    <div class="box" id="sponsors">

    <h1 id="news_handle">Home</h1>
    <ul>
            <li><a href="login.php">Login</a></li>
    <li><a href="../register.php">Register</a></li>
    </ul>
    <div class="bar"> <span> <span></span></span></div>
    </div>


    <div class="box" id="affiliates"></div>


    <div class="box" id="items"></div>


</div>

Я не изменил ваш CSS, вот что такое живой

Answer 2

Я бы предложил поместить оба столбца в div:

<div class="sidebar"> 
       <div id="col1"></div> 
       <div id="col2"></div>
</div>

Теперь float: left; для центральной и левой боковой панели. Для того, чтобы col1 и col2 находились друг под другом, используйте, как сказал Филипп display: block;

Редактировать:

Поскольку у вас уже есть первый столбец слева, если вы хотите, чтобы второй столбец справа от поля находился слева под первым столбцом, просто добавьте его следующим образом:

<div id="col1">
   First column content

   <div id="col1>
       Second column content
   </div>
</div> 
<div id="col2"></div>

Ссылка на HTML-файл с помощью css

Answer 3

Вот, пожалуйста, http://jsfiddle.net/d47Vs/

Answer 4

я бы предложил удалить

float:left; 

из столбцов ... и добавить:

display:block;