Как я сижу 2 деления слева и справа друг от друга

Question

Итак, что я пытаюсь сделать - это сидеть <div id="box"> слева и <div id="box2"> справа от внутри контейнера <div id="content"> я должен упомянуть, что они не могут быть позиционными: абсолютные; если нет способа убедиться, что height:auto; div не потеряет свою высоту, потому что мой опыт position:absolute;, кажется, витает над другим контентом.

вот прямая ссылка, чтобы показать вам, что происходит. имейте в виду, что это чистый CSS-макет с PHP-магистралью

Прямая ссылка на выпуск

<div id="content">
    <div id="box1">
<h2>Company Information</h2>
            <img src="images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" />
            <p color="FF6600">
            some content here
            </p>
    </div>
<div id="clear"></div>
    <div id="box" style="width:350px;">
            <h2>Availability</h2>
            <p>
            some more content here
            </p>
    </div>
<div id="clear"></div>
        <div id="box2" style="width:350px;float:left;overflow: auto;">
            <h2>Our Commitment</h2>
            <p> 
              some content here
            </p>
        </div>
</div>

Answer 1

То, что делает float, дает вашему элементу приоритетное размещение к крайнему левому краю содержащего его элемента div за счет других встроенных элементов на странице. Первоначально он был предназначен для таких вещей, как изображения, помещенные рядом с текстом (чтобы текст мог обернуться вокруг них).

Если вы хотите разместить два элемента рядом друг с другом, вы можете сделать это, используя float:left; и float:right;, и поместить их в другой элемент div, чтобы другие элементы не пытались сжать их (или убедиться, что следующий элемент в колоде имеет clear:both;). В содержащем их div (если вы его используете), используйте overflow:auto, чтобы автоматически развернуть его, чтобы он соответствовал и этим div. Удостоверьтесь, что вы также даете плавающим div s ширину, иначе они автоматически расширятся, чтобы заполнить ширину своего родителя.

Answer 2

Вы ищете макет из трех столбцов. Это сложнее, чем вы думаете. Вы можете легко получить это на простом примере, но если вы начнете добавлять верхние или нижние колонтитулы и расширять столбцы содержимым, это будет сложно.

Предлагаю прочитать эту статью , чтобы получить некоторые идеи.

Answer 3

Вы хотите "плавать" ваши дивы. Установите ширину в div, поместите их влево или вправо и обязательно очистите их после них, чтобы не допустить непреднамеренного заполнения другими элементами. Используйте в своих классах / идентификаторах CSS операторы, подобные приведенным ниже.

float:left;
width:WHATEVERpx;

...

float:right;
width:WHATEVERpx;

...

clear:both;