Я хочу разместить два тега DIV бок о бок без использования фиксированной ширины. Первый div расширяет его содержимое, а второй div должен заполнить оставшееся пространство. Также div должен НЕ сидеть поверх другого div, потому что у них есть прозрачное фоновое изображение, поэтому, если они пересекают его, это заметно. Я пробовал все возможности, которые я мог придумать, но не смог найти решение, используя теги DIV.
Я могу сделать это с помощью TABLE, но можно ли это сделать с помощью DIV? Или это еще одна вещь, которую DIV не может сделать?
Здесь код:
#right{
background: green;
width: 100%;
}
#left {
margin-top: 5px; /* to test if they intersect*/
background: red;
}
#container {
width: 800px;
}
<div id="container">
<div id="left"> This div is as big as it content</div>
<div id="right"> rest of space</div>
</div>
Спасибо за ответы!
Смотрите: http://jsfiddle.net/kGpdM/
#left {
background: #aaa;
float: left
}
#right {
background: cyan;
overflow: hidden
}
Это работает во всех современных браузерах и IE7 +.
Левый столбец будет таким же широким, как и содержимое внутри него. Правый столбец займет оставшееся пространство.
overflow: hidden "трюк" за этим ответом объясняется здесь.