HTML, столбцы и разделы

Question

Я использую HTML. Я разделил страницу на две колонки: inner1 и inner2.

• Inner1 имеет некоторые данные, у него нет проблемы, как в столбце 1.
• Inner2 имеет проблему: поскольку Inner2 разделен на две строки [в одном столбце2]
• point2 - имеет переменные данные [строка -1]
• another_new - фиксированные данные [строка-2]

HTML:

<div id="outer">
    <div id="inner1">
        <div id="point1">
        </div>
        <div id="response">
        </div>
    </div>
<div id="inner2">
    <div id="point2"> <!-- Variable data -->
    </div>
    <div id="another_new"> <!-- Fixed data -->
    </div>
    </div>
</div>

CSS:

#inner1{
    float : left;
    width :61%;
}
#inner2{
    float :right;
    width :39%;
}

Как мне отобразить страницу? Point2 данные не должны перекрываться с another_new данными.

Answer 1

Вы можете свободно перемещать одну колонку влево, а другую - вправо. Ваша проблема, скорее всего, связана с тем, что вы используете 100% ширины. Если у этих элементов есть какие-либо поля или границы, связанные с ними, это может привести к тому, что они будут шире, чем вы ожидаете, и, следовательно, не будут располагаться рядом. Некоторые браузеры будут иметь проблемы с этим, даже если нет полей / границ. Попробуйте уменьшить ширину одного из столбцов примерно на 1%.

Другая возможность - атрибут clear. Убедитесь, что оба столбца имеют четкое значение: нет; применяется к ним. Кроме того, вы можете применить очистку: слева; в левом столбце и ясно: справа; в правую колонку.

В зависимости от конкретной ситуации и используемого браузера, также может быть полезно иметь «прослеживаемый» div после ваших двух столбцов:

<div class="col1"></div>
<div class="col2"></div>
<div class="clearBoth"></div>

div.clearBoth
{
   clear: both;
   height: 0px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}

Также вас может заинтересовать трюк clearFix для CSS: здесь

Answer 2

Измените свой CSS так, чтобы оба столбца были установлены на float: left;. Это заставит ваши столбцы складываться один за другим.

Возможно, вам также придется уменьшить ширину, которую вы там указали. Некоторые браузеры, такие как Internet Explorer, не любят иметь ширину 100% (61% + 39%) и поэтому вызывают перенос самого дальнего правого всплывающего элемента на следующую строку.

Я только догадываюсь, что это твоя проблема: о)

Вы также можете попробовать добавить CSS,

clear: both;

в div 'another_new'. Это будет толкать его ниже «точки 2» независимо от того, насколько велика точка 2.