div авто ширина

[droni4]

Подскажите пожалуйста по коду

div'ы должны быть разной ширины в зависимости от контента
а они берут ширину от дива который шире всех

Спойлер: HTML

<div class="sob-full-opis-info">
        <div class="sob-full-data">[xfvalue_data]</div>
        <div class="sob-full-organizator">Hobbit Hall</div>
        <div class="sob-full-price">300 руб.</div>
    </div>

Спойлер: CSS

.sob-full-opis-info {
    float: right;
    min-width:0;
}
.sob-full-data {
    background: #f52929;
    padding: 10px;
    color: white;
    font-size:18px;
}
.sob-full-organizator {
    background: #022A6F;
    padding: 10px;
    color: white;
    font-size:18px;
}
.sob-full-price {
    background: #2F8BF0;
    padding: 10px;
    color: white;
    font-size:18px;
}

в общем разобрался таким образом:

Спойлер: HTML

<div class="sob-full-opis-info">
  <div class="sob-full-data">[xfvalue_data]</div>
  <div class="sob-full-organizator">Hobbit Hall</div>
  <div class="sob-full-price">300 руб.</div>
</div>

Спойлер: CSS

.sob-full-opis-info {
    float: right;
    text-align:right;
    margin-left:15px;
}
.sob-full-data {
    float:right;
    background: #f52929;
    padding: 10px;
    color: white;
    font-size:18px;
}
.sob-full-organizator {
    float:right;
    background: #022A6F;
    padding: 10px;
    color: white;
    font-size:18px;
}
.sob-full-price {
    background: #2F8BF0;
    padding: 10px;
    color: white;
    font-size:18px;
    float:right;
}

 

[newbik]

можно еще через display:inline-block

 

[droni4]

можно еще через display:inline-block

а можно более расширенный ответ для экономии времени, куда вставить?

честно говоря пробовал через display:inline-block, но если носом ткнешь и все заработает, то низкий поклон тебе)

 

[ITeshnik]

а можно более расширенный ответ для экономии времени, куда вставить?

честно говоря пробовал через display:inline-block, но если носом ткнешь и все заработает, то низкий поклон тебе)

А зачем ты в этом случае используешь блочные элементы?
Почему не засунуть это в спан?

 

[vava1]

а можно более расширенный ответ для экономии времени, куда вставить?

честно говоря пробовал через display:inline-block, но если носом ткнешь и все заработает, то низкий поклон тебе)

Кажется понял о чем он, но тут соль, т.е. есть обертка для этих элементов, его ширина должна быть не меньше той штуки. эти штуки в инлайн блок и выравнивание текста на право, + падинги = профит
прим:

div>span*3

css:

div {
width: 180px; // ширина макс ! важно для того, что бы первый и второй спан не был в одну строку из-за инлайн позиций
float: right
  span {
    padding: 4px 10px;
  }
}

 

[droni4]

блоки уехали в IE
пациент над которым тружусь:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

решение еще не нашел что бы во всех браузерах включая IE были одинаковы

 

[vava1]

убери чертовые br,
добавь к .sob-full-opis-info {width: 40%}
у внутренних блоков убери флоат и добавь display: inline-block;
проверить не могу, должно работать.
p.s. Соль может быть в первых строчках контента.. он может наезжать... ну или туплю

 

[droni4]

убери чертовые br,
добавь к .sob-full-opis-info {width: 40%}
у внутренних блоков убери флоат и добавь display: inline-block;
проверить не могу, должно работать.

Все круто, спасибо, заработало =).
Хром, IE - полет нормальный

Низкий поклон вам