IMHO.WS - Отцентрировать div в div

IMHO.WS (http://www.imho.ws/index.php)

- Дизайн (http://www.imho.ws/forumdisplay.php?f=22)

- - Отцентрировать div в div (http://www.imho.ws/showthread.php?t=146098)

Отцентрировать div в div

Доброго времени суток,

Нужна помощь по CSS:
идея такая, есть некоторый растягивающийся контент-контейнер в котором нужно разместить несколько колонок так чтобы отступ между колонками был одинаковым, а вся группа колонок была размещена по центру контент-конейнера.
Пол дня ломал голову и ещё половину прогуглил но так толком и не вышло. Решил поместить все колонки в контейнер колонок, но с этим тоже ничего не получилось.:confused:.
Буду рад вариантам решения этой задачки.

такой вариант устроит?

Код HTML:

<div style="width: 100%; border: 1px solid red; text-align: center">

  <table>

    <tr>

      <td>

        <div style="width: 200px; border: 1px solid navy; float: left; ">

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

          Proin ut nulla a leo sagittis placerat. Maecenas lacinia, 

          orci vitae commodo eleifend, mauris nisl dapibus ligula, 

          vitae dignissim sapien neque vitae justo.

        </div>

        <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

          Mauris id dictum eros. Curabitur consectetur magna et 

          lorem convallis sollicitudin. Vestibulum ante ipsum 

          primis in faucibus orci luctus et ultrices posuere

          cubilia Curae; Praesent sodales, diam sit amet dictum 

          gravida, dui enim rhoncus arcu, et ultrices nibh justo a libero.  

        </div>

        <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

          Proin aliquet consectetur dolor elementum aliquam. 

          Sed eleifend felis mollis lorem rutrum vitae malesuada 

          nisi condimentum. Quisque est lectus, eleifend eu mattis non, 

          hendrerit at leo. Suspendisse potenti. Aliquam justo 

          lectus, auctor ut feugiat quis, iaculis nec nibh. 

          Suspendisse rutrum gravida tortor, at dapibus lectus convallis ac. 

        </div>

      </td>

    </tr>

  </table>

</div>

У меня они почему-то к левому краю прижались, с отступом как и запланировано, но не по центру а с краю:confused:... А какую роль должна играть таблица с одной ячейкой? Ну и на самом деле хотелось бы без таблиц решить эту задачу, это как раз то что я сейчас и изучаю:)

хм, да - странно...

я это в EditPlus набросал - его превью все по центру показывает; а вот браузеры действительно все влево прижимают :( всю жизнь был уверен, что EditPlus использует движок системного IE. сорри - поторопился; завтра, если будет время, еще подумаю над вариантами

ЗЫ: далеко не факт, что без таблицы получится; я тут полистал сайты - народ жалуется, что дивы плохо работают с центровкой чего-либо, кроме текста.

ЗЗЫ: вот так работает точно; конечно, это не "дивы в диве", но, по крайней мере, можно попробовать от этого оттолкнуться...

Код HTML:

<center>

  <table>

    <tr>

      <td>

        <div style="width: 200px; border: 1px solid navy; float: left; ">

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

          Proin ut nulla a leo sagittis placerat. Maecenas lacinia, 

          orci vitae commodo eleifend, mauris nisl dapibus ligula, 

          vitae dignissim sapien neque vitae justo.

        </div>

        <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

          Mauris id dictum eros. Curabitur consectetur magna et 

          lorem convallis sollicitudin. Vestibulum ante ipsum 

          primis in faucibus orci luctus et ultrices posuere

          cubilia Curae; Praesent sodales, diam sit amet dictum 

          gravida, dui enim rhoncus arcu, et ultrices nibh justo a libero.  

        </div>

        <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

          Proin aliquet consectetur dolor elementum aliquam. 

          Sed eleifend felis mollis lorem rutrum vitae malesuada 

          nisi condimentum. Quisque est lectus, eleifend eu mattis non, 

          hendrerit at leo. Suspendisse potenti. Aliquam justo 

          lectus, auctor ut feugiat quis, iaculis nec nibh. 

          Suspendisse rutrum gravida tortor, at dapibus lectus convallis ac. 

        </div>

      </td>

    </tr>

  </table>

</center>

Этот вариант таки да работает, но... тэг <center> объявлен устаревшим =\ интересно как они предлагают его заменить с помощью CSS если единственным вариантом выравнять по центру является инструкция text-align и по идее применяться она должна к тексту... DreamWeaver тоже предыдущий пример привьюхой показал нормально, а вот на поверку в браузере вышла кака... Жалобы я тоже на эту тему сегодня лопатой разгребал, но толку пока с того мало. Картинку в диве я сумел всё таки отправить в центр. Правда пришлось её блоком объявить - только тогда она начала нормально реагировать на margin, а так тоже было ноль реакции... В общем если будут мысли на эту тему - буду рад... Если сам чего наковыряю - отпишусь.

вот решение - лови :)
ключевые моменты - указать для контейнера конкретную ширину и margin-left/right: auto

проверил в браузерах - работает корректно

Код HTML:

<div style="width: 626px; border: 1px solid red; text-align: justify; margin-left: auto; margin-right: auto; ">

  <div style="width: 200px; border: 1px solid navy; float: left; ">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

    Proin ut nulla a leo sagittis placerat. Maecenas lacinia, 

    orci vitae commodo eleifend, mauris nisl dapibus ligula, 

    vitae dignissim sapien neque vitae justo.

  </div>

  <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

    Mauris id dictum eros. Curabitur consectetur magna et 

    lorem convallis sollicitudin. Vestibulum ante ipsum 

    primis in faucibus orci luctus et ultrices posuere

    cubilia Curae; Praesent sodales, diam sit amet dictum 

    gravida, dui enim rhoncus arcu, et ultrices nibh justo a libero.  

  </div>

  <div style="width: 200px; border: 1px solid navy; float: left; margin-left: 10px">

    Proin aliquet consectetur dolor elementum aliquam. 

    Sed eleifend felis mollis lorem rutrum vitae malesuada 

    nisi condimentum. Quisque est lectus, eleifend eu mattis non, 

    hendrerit at leo. Suspendisse potenti. Aliquam justo 

    lectus, auctor ut feugiat quis, iaculis nec nibh. 

    Suspendisse rutrum gravida tortor, at dapibus lectus convallis ac. 

  </div>

</div>

Да, дас ист гут, так как уже работает, но контейнер растягивающийся по идее должен был быть чтобы можно было в него положить как одну так и три колонки произвольной ширины, а он уже принимал размер(ключевой момент) в зависимости от контента(колонок и их margins), чтобы не приходилось менять его размер с одной стороны и по возможности чтобы он не заполнял собой весь родительский конейнер... Если будут идеи реализации сего - очень буду рад, сам уже почти потерял надежду. И конечно большое спасибо что не забыл подумать на эту тему:yees: